@tollerud/ui 1.0.2 → 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +45 -4
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -4,6 +4,19 @@ A complete, browsable UI library built around **monochrome + yellow accent**. No
|
|
|
4
4
|
|
|
5
5
|
**[Live docs →](https://tollerud.github.io/design-system/)** — browse every token, component, and pattern live with copy-paste code.
|
|
6
6
|
|
|
7
|
+
**Requirements:** React ≥ 18 · TypeScript supported (types included) · Tailwind CSS v3 or v4
|
|
8
|
+
|
|
9
|
+
→ **[Component reference →](COMPONENTS.md)** · **[Setup guide →](GETTING_STARTED.md)** · **[Brand guidelines →](BRAND.md)** · **[Changelog →](CHANGELOG.md)**
|
|
10
|
+
|
|
11
|
+
## Packages
|
|
12
|
+
|
|
13
|
+
| Package | Install | Use when |
|
|
14
|
+
|---------|---------|----------|
|
|
15
|
+
| [`@tollerud/ui`](https://www.npmjs.com/package/@tollerud/ui) | `npm install @tollerud/ui` | You want the full design system — components, tokens, Tailwind preset |
|
|
16
|
+
| [`@tollerud/footer`](https://www.npmjs.com/package/@tollerud/footer) | `npm install @tollerud/footer` | You only need the branded footer, with no other design system dependency |
|
|
17
|
+
|
|
18
|
+
`@tollerud/ui` already re-exports `Footer` internally — install `@tollerud/footer` separately only when you want the footer in a project that doesn't use the full design system.
|
|
19
|
+
|
|
7
20
|
## Philosophy
|
|
8
21
|
|
|
9
22
|
> Clean lines. Sharp contrast. Yellow where it counts.
|
|
@@ -15,12 +28,16 @@ Tollerud DS is minimal but not cold. It uses a near-black foundation with warm y
|
|
|
15
28
|
### npm package (recommended)
|
|
16
29
|
|
|
17
30
|
```bash
|
|
18
|
-
npm install @tollerud/ui clsx tailwind-merge
|
|
19
|
-
|
|
31
|
+
npm install @tollerud/ui clsx tailwind-merge tailwindcss
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
`@paper-design/shaders-react` is an **optional** peer dependency — the package installs and works without it. Install it only if you use `NoirGlowBackground`; all other components fall back to CSS automatically.
|
|
35
|
+
|
|
36
|
+
```bash
|
|
20
37
|
npm install @paper-design/shaders-react
|
|
21
38
|
```
|
|
22
39
|
|
|
23
|
-
**Tailwind** — add the preset in `tailwind.config.ts`:
|
|
40
|
+
**Tailwind v3** — add the preset in `tailwind.config.ts`:
|
|
24
41
|
|
|
25
42
|
```ts
|
|
26
43
|
import type { Config } from 'tailwindcss'
|
|
@@ -37,6 +54,28 @@ const config: Config = {
|
|
|
37
54
|
export default config
|
|
38
55
|
```
|
|
39
56
|
|
|
57
|
+
**Tailwind v4** — use `@config` and `@source` in your CSS instead of a config file:
|
|
58
|
+
|
|
59
|
+
```css
|
|
60
|
+
/* app/globals.css */
|
|
61
|
+
@import 'tailwindcss';
|
|
62
|
+
@import '@tollerud/ui/globals.css';
|
|
63
|
+
|
|
64
|
+
/* Pull in the preset tokens as a v4 plugin */
|
|
65
|
+
@config './tailwind.config.ts';
|
|
66
|
+
|
|
67
|
+
/* Scan the package dist so utility classes aren't purged */
|
|
68
|
+
@source '../node_modules/@tollerud/ui/dist';
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
If you're not using a `tailwind.config.ts` in v4, copy the contents of `tollerud-preset.js` into a `@theme {}` block manually, or keep a minimal config just for the preset:
|
|
72
|
+
|
|
73
|
+
```ts
|
|
74
|
+
// tailwind.config.ts (v4 shim)
|
|
75
|
+
import tollerudPreset from '@tollerud/ui/preset'
|
|
76
|
+
export default { presets: [tollerudPreset] }
|
|
77
|
+
```
|
|
78
|
+
|
|
40
79
|
**CSS** — import tokens and component classes in `app/globals.css`:
|
|
41
80
|
|
|
42
81
|
```css
|
|
@@ -49,6 +88,8 @@ export default config
|
|
|
49
88
|
import { Button, Card, Badge, StatusDot, CodeBlock, Kbd, CommandMenu, NoirGlowBackground } from '@tollerud/ui'
|
|
50
89
|
```
|
|
51
90
|
|
|
91
|
+
TypeScript types are included — no `@types/*` package needed. See **[COMPONENTS.md](COMPONENTS.md)** for the full prop reference for every component.
|
|
92
|
+
|
|
52
93
|
Publish a new version by creating a GitHub Release; CI runs `npm publish` when `NPM_TOKEN` is configured.
|
|
53
94
|
|
|
54
95
|
### Copy from repo (alternative)
|
|
@@ -168,7 +209,7 @@ cp globals.css src/app/
|
|
|
168
209
|
cp tollerud-preset.js .
|
|
169
210
|
```
|
|
170
211
|
|
|
171
|
-
See
|
|
212
|
+
See [GETTING_STARTED.md](GETTING_STARTED.md) for the full setup guide.
|
|
172
213
|
|
|
173
214
|
## File Structure
|
|
174
215
|
|