@dybo-ai/design 1.3.0 → 2.0.0
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/CLAUDE.md +35 -28
- package/README.md +59 -31
- package/dist/index.cjs +1340 -67
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +383 -3
- package/dist/index.d.ts +383 -3
- package/dist/index.js +1306 -68
- package/dist/index.js.map +1 -1
- package/legacy-theme.css +1112 -0
- package/package.json +3 -1
- package/portal-tokens.css +8 -182
- package/theme.css +1572 -418
- package/tokens.cjs +219 -125
- package/tokens.json +223 -163
- package/tokens.mjs +199 -125
package/CLAUDE.md
CHANGED
|
@@ -4,60 +4,67 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
|
|
|
4
4
|
|
|
5
5
|
## What this repo is
|
|
6
6
|
|
|
7
|
-
`@dybo-ai/design` — the DYBO design system packaged as an installable npm module
|
|
7
|
+
`@dybo-ai/design` — the DYBO design system packaged as an installable npm module, published publicly on the npm registry (`registry.npmjs.org`). It ships design tokens, plain CSS + helper classes, and ~55 React components with TypeScript. There's a real build (`tsup`, see `npm run build`), but no test suite or linter yet.
|
|
8
8
|
|
|
9
9
|
This `CLAUDE.md` is itself shipped to consumers (it's in `package.json`'s `files` list) and is meant to be copied into a consuming app's own `CLAUDE.md` — see "Design system rules for consuming apps" below. Keep that section self-contained and consumer-facing; put repo-maintenance notes in the sections after it instead of mixing them in.
|
|
10
10
|
|
|
11
|
-
##
|
|
11
|
+
## History: where the default system comes from
|
|
12
12
|
|
|
13
|
-
`
|
|
13
|
+
Through `1.x`, this package's default tokens/theme were built independently of DYBO's actual product screens — a separate visual system, unrelated to the prototypes the design team builds from. A `portal` namespace was added alongside it for a Ticket Management prototype, mirroring the *real* DYBO system (`designSystem/tokens.css` in the prototyping repo) byte-for-byte.
|
|
14
|
+
|
|
15
|
+
**As of `2.0.0`, that's inverted**: `portal` — the real system — is the default everywhere (`tokens.json`'s root keys, `theme.css`). The old default moved to `legacy` (`tokens.json`'s `legacy` key, `legacy-theme.css`) and stays importable for one major version. `portal` itself is now a deprecated alias of the same root values (see `docs/portal-token-mapping.md`), removed in `3.0`.
|
|
16
|
+
|
|
17
|
+
**When adding a new screen/component to any DYBO app going forward, treat the *default* export as canonical** — don't reach for `legacy` unless you have a specific reason to match the pre-2.0 look.
|
|
18
|
+
|
|
19
|
+
## Architecture: one source of truth, hand-synced mirrors
|
|
20
|
+
|
|
21
|
+
`tokens.json` is canonical (values + original Figma variable names, `light`/`dark` HSL pairs). Every other token surface is a **manually maintained mirror** of it — there is no code generation:
|
|
14
22
|
|
|
15
23
|
| File | Mirrors tokens.json as... |
|
|
16
24
|
| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
17
|
-
| `tokens.mjs` | ESM flat exports (`color`, `space`, `radius`, etc
|
|
25
|
+
| `tokens.mjs` | ESM flat exports (`color`, `priority`, `ticketStatus`, `space`, `radius`, etc., plus `legacy` and the deprecated `portal` alias) |
|
|
18
26
|
| `tokens.cjs` | CommonJS mirror of `tokens.mjs` |
|
|
19
|
-
| `theme.css` | CSS custom properties + `.dybo-*` helper classes (`.dybo-glass`, `.dybo-btn`, `.dybo-input`, `.dybo-badge
|
|
20
|
-
| `
|
|
21
|
-
| `
|
|
27
|
+
| `theme.css` | CSS custom properties (light + `.dark`) + `.dybo-*` helper classes (`.dybo-glass`, `.dybo-btn`, `.dybo-input`, `.dybo-badge`, and the full 2.0 catalog) |
|
|
28
|
+
| `legacy-theme.css` | Frozen, byte-for-byte copy of the pre-2.0 `theme.css` — for anything that still needs the old look |
|
|
29
|
+
| `portal-tokens.css` | Deprecated: now just `@import "./theme.css"` — kept so existing `<link>`/`@import` references don't break |
|
|
30
|
+
| `src/index.tsx` | React components over `theme.css` classes — requires the consumer to import `theme.css` (or `legacy-theme.css`) separately |
|
|
22
31
|
|
|
23
|
-
**When changing a token value or adding a new one, update all mirrors in the same change** (`tokens.json`, `tokens.mjs`, `tokens.cjs`, `theme.css
|
|
24
|
-
|
|
25
|
-
`portal` namespace in `tokens.json` holds ticket-management / client-portal values (priority badges, ChatWoot statuses, operator background). See `docs/portal-token-mapping.md` for the full ticket ↔ dybo mapping.
|
|
32
|
+
**When changing a token value or adding a new one, update all mirrors in the same change** (`tokens.json`, `tokens.mjs`, `tokens.cjs`, `theme.css`). There's no automated check that catches drift between them (a Style Dictionary generation pipeline is proposed but not implemented — see Part E in the history below).
|
|
26
33
|
|
|
27
34
|
`assets/` holds static brand image files (currently the logo) — it's shipped via `package.json`'s `files` list and importable as `@dybo-ai/design/assets/<file>`, but it's not part of the token-mirror sync described above.
|
|
28
35
|
|
|
29
|
-
`docs/design-system.md` is the narrative reference extracted from Figma (file `ZHtkvTEeTYlNVbSncLyI1a`) —
|
|
36
|
+
`docs/design-system.md` is the narrative reference extracted from Figma (file `ZHtkvTEeTYlNVbSncLyI1a`) — the rationale/source document behind the **legacy** tokens specifically. The real system's own rationale lives in the prototyping repo's `designSystem/handoff-prompt-for-mussoi.md` and `designSystem/00-README.md`.
|
|
30
37
|
|
|
31
38
|
## Commands
|
|
32
39
|
|
|
33
|
-
There is no build, lint, or test tooling in this repo — don't invent npm scripts that don't exist (`package.json` has no `scripts` field).
|
|
34
|
-
|
|
35
|
-
Publishing (manual, no CI):
|
|
36
|
-
|
|
37
40
|
```bash
|
|
38
|
-
npm
|
|
39
|
-
npm publish
|
|
40
|
-
git push --follow-tags
|
|
41
|
+
npm run build # tsup — compiles src/index.tsx to dist/{index.js,index.cjs,index.d.ts}
|
|
41
42
|
```
|
|
42
43
|
|
|
43
|
-
|
|
44
|
+
No lint or test tooling yet. Don't invent npm scripts that don't exist beyond `build`.
|
|
45
|
+
|
|
46
|
+
Publishing is on the public npm registry via a GitHub Actions pipeline triggered by a GitHub Release — see `docs/PUBLISHING.md` for the full step-by-step (version bump → tag → push → draft a release → the pipeline builds and publishes). There is also a manual path (`npm login`, `npm publish`) documented there for one-off local publishes.
|
|
44
47
|
|
|
45
48
|
## Design system rules for consuming apps
|
|
46
49
|
|
|
47
50
|
When building UI in a DYBO app, use `@dybo-ai/design`. Do not hard-code hex values or ad-hoc spacing — reference tokens.
|
|
48
51
|
|
|
49
|
-
- **Font:** Urbanist (400/500/600/700). Titles use weight 400 with 1px letter-spacing; body uses weight 500.
|
|
50
|
-
- **Style:** glassmorphism — translucent cards `
|
|
51
|
-
- **
|
|
52
|
+
- **Font:** Urbanist (400/500/600/700). Titles use weight 400 with 1px letter-spacing; body uses weight 500 — hierarchy comes from size, never from font-weight, even on card titles.
|
|
53
|
+
- **Style:** glassmorphism — translucent cards (`hsl(var(--card) / 0.7)`), `backdrop-blur-sm` always (it's identity, not decoration), 20px radius, soft shadow. **Border is `border-white` in light mode, `border-border` in dark mode** — never the reverse.
|
|
54
|
+
- **Full light + dark support**: toggle by adding/removing a `.dark` class on `<html>` (never `data-theme`) — see the toggle script in `docs/design-system.md`'s dark-mode section or the prototyping repo's `designSystem/tokens.css` §1.4.
|
|
55
|
+
- **Icons:** Tabler Icons only, inline SVG, always `stroke-width="2"`, never a filled icon set.
|
|
56
|
+
- **Button hover is one rule everywhere:** `hover:bg-primary hover:text-primary-foreground` — filled, outline, and ghost alike (the `danger` variant is the one exception — it dims via opacity instead).
|
|
57
|
+
- **Secondary text is opacity, never a second color** — `opacity: var(--opacity-intense)` (0.64) on `--foreground`.
|
|
58
|
+
- **Key colors:** ink `#0a1323` / `hsl(var(--foreground))`, page `#e6eaf0` / `hsl(var(--background))`. Semantic: success/warning share the token pattern `--x` / `--x-foreground` / `--x-background`; the one real red is `--destructive` (`--error`/`--warning` are both amber — a documented Figma naming quirk, not a bug).
|
|
52
59
|
- **Spacing:** 4px scale — 4/8/12/16/20/32.
|
|
53
60
|
- **Radius:** 12 (buttons/inputs), 20 (cards), 999 (pills).
|
|
54
61
|
|
|
55
62
|
How to consume (pick per app):
|
|
56
63
|
|
|
57
|
-
- Tailwind app → `@import "@dybo-ai/design/theme.css"` in CSS, use `
|
|
58
|
-
- Non-Tailwind → `import "@dybo-ai/design/theme.css"` and use `.dybo-glass`, `.dybo-btn`, `.dybo-input`, `.dybo-badge`.
|
|
59
|
-
-
|
|
60
|
-
- React → `import { Button, Card,
|
|
61
|
-
- Programmatic values → `import { color,
|
|
64
|
+
- Tailwind app → `@import "@dybo-ai/design/theme.css"` in CSS, use the semantic utilities it registers (`bg-background`, `text-foreground`, `bg-card`, `bg-primary`, `rounded-md`, `shadow-level-1`, etc.).
|
|
65
|
+
- Non-Tailwind → `import "@dybo-ai/design/theme.css"` and use `.dybo-glass`, `.dybo-btn`, `.dybo-input`, `.dybo-badge`, and the rest of the `.dybo-*` catalog.
|
|
66
|
+
- Need the pre-2.0 look specifically → `import "@dybo-ai/design/legacy-theme.css"` instead (same class names, old values).
|
|
67
|
+
- React → `import { Button, Card, StepNavigator, TicketCard, ... } from "@dybo-ai/design"` (also import the CSS — see `README.md` for the full ~55-component catalog).
|
|
68
|
+
- Programmatic values → `import { color, priority, ticketStatus, space, radius } from "@dybo-ai/design/tokens"`.
|
|
62
69
|
|
|
63
|
-
Reference `tokens.json` for the full token list
|
|
70
|
+
Reference `tokens.json` for the full token list. Semantic "danger" is `--destructive` (real red) — ignore Figma's mislabeled orange "Feedback/Error", which is `--warning`/`--error`.
|
package/README.md
CHANGED
|
@@ -32,16 +32,17 @@ Add one line to your app's main CSS file:
|
|
|
32
32
|
@import "@dybo-ai/design/theme.css";
|
|
33
33
|
```
|
|
34
34
|
|
|
35
|
-
This automatically registers
|
|
35
|
+
This automatically registers DYBO's semantic utilities via `@theme` — the same names Tailwind's own config uses across every DYBO prototype, so a class here is a class there:
|
|
36
36
|
|
|
37
|
-
| Utility
|
|
38
|
-
|
|
|
39
|
-
| `bg
|
|
40
|
-
| `
|
|
41
|
-
| `
|
|
42
|
-
| `rounded
|
|
43
|
-
| `shadow-
|
|
44
|
-
|
|
37
|
+
| Utility | Example |
|
|
38
|
+
| ----------------- | --------------------------------------------------------------- |
|
|
39
|
+
| `bg-*`/`text-*` | `bg-background`, `bg-card`, `bg-primary`, `text-foreground`, `text-muted-foreground` |
|
|
40
|
+
| `border-*` | `border-border` |
|
|
41
|
+
| `bg-brand-*` | `bg-brand-dark-orb`, `bg-brand-indigo`, `bg-brand-cultured` |
|
|
42
|
+
| `rounded-*` | `rounded-sm` (12px), `rounded-md`/`rounded-lg` (20px), `rounded-full` |
|
|
43
|
+
| `shadow-level-*` | `shadow-level-1`, `shadow-level-2` |
|
|
44
|
+
|
|
45
|
+
Need the pre-2.0 utility names (`bg-dybo-*`, `shadow-dybo-card`, …)? Import `@dybo-ai/design/legacy-theme.css` instead — see "Legacy system" below.
|
|
45
46
|
|
|
46
47
|
**No Tailwind?** Import only the CSS — all variables and `.dybo-*` classes work in any framework:
|
|
47
48
|
|
|
@@ -62,16 +63,22 @@ All components are TypeScript with `I`-prefixed interfaces.
|
|
|
62
63
|
|
|
63
64
|
### Available components
|
|
64
65
|
|
|
65
|
-
| Category
|
|
66
|
-
|
|
|
67
|
-
| **Base**
|
|
68
|
-
| **Layout**
|
|
69
|
-
| **Navigation**
|
|
70
|
-
| **Data**
|
|
71
|
-
| **
|
|
72
|
-
| **
|
|
73
|
-
| **
|
|
74
|
-
| **
|
|
66
|
+
| Category | Components |
|
|
67
|
+
| ------------------- | ----------------------------------------------------------------------------------------------------- |
|
|
68
|
+
| **Base** | `Button`, `Card`, `Input`, `Select`, `Badge` |
|
|
69
|
+
| **Layout** | `AppShell`, `Sidebar`, `TopBar`, `IconRail`, `IconRailItem` |
|
|
70
|
+
| **Navigation** | `NavItem`, `NavSection`, `NavTabs`, `Tabs`, `UnderlineTabs`, `FilterPills`, `ScopeTabs`, `OrgEntitySelector`, `ThemeToggle`, `PlatformSwitcher` |
|
|
71
|
+
| **Data** | `DataTable`, `OverviewGrid`, `OverviewField`, `Pagination` |
|
|
72
|
+
| **KPIs** | `KpiCard`, `KpiGrid`, `KpiStrip`, `MetadataBadge` |
|
|
73
|
+
| **Forms** | `SearchField`, `DateRangeTrigger`, `UploadDropzone`, `StepNavigator`, `DocumentTypeGrid`, `ReadOnlyField` |
|
|
74
|
+
| **Feedback** | `Alert`, `Banner`, `Toast`, `EmptyState`, `Accordion` |
|
|
75
|
+
| **Overlay** | `Modal`, `Drawer` |
|
|
76
|
+
| **Status badges** | `PriorityBadge`, `TicketStatusBadge`, `QueueStatusBadge`, `ChannelBadge`, `SignalBadge`, `CategoryLabel`, `LinkedAppIndicator` |
|
|
77
|
+
| **Files** | `FilePreviewCard`, `FileReviewRow`, `RejectionReasonPanel` |
|
|
78
|
+
| **Ticket / chat** | `TicketCard`, `ChatThread`, `ChatMessage`, `InternalNoteCard` |
|
|
79
|
+
| **Identity** | `Avatar`, `NotificationsButton` |
|
|
80
|
+
| **Auth** | `LoginCard` |
|
|
81
|
+
| **Misc** | `ViewToggle` |
|
|
75
82
|
|
|
76
83
|
---
|
|
77
84
|
|
|
@@ -292,12 +299,22 @@ import { Select } from "@dybo-ai/design";
|
|
|
292
299
|
## Tokens in JS/TS
|
|
293
300
|
|
|
294
301
|
```ts
|
|
295
|
-
import { color, space, radius } from "@dybo-ai/design/tokens";
|
|
302
|
+
import { color, priority, space, radius } from "@dybo-ai/design/tokens";
|
|
296
303
|
|
|
297
|
-
color.
|
|
298
|
-
color.
|
|
299
|
-
|
|
300
|
-
|
|
304
|
+
color.light.background; // "216 25% 92%" — HSL triplet, no hsl() wrapper
|
|
305
|
+
color.dark.background; // "218 56% 9%"
|
|
306
|
+
priority.urgent.fg; // "355 74% 45%"
|
|
307
|
+
space["200"]; // 16
|
|
308
|
+
radius.medium; // 20
|
|
309
|
+
```
|
|
310
|
+
|
|
311
|
+
Need the pre-2.0 shape (`color.brand.blue`, `color.semantic.danger.solid`, …)? It's under `legacy`:
|
|
312
|
+
|
|
313
|
+
```ts
|
|
314
|
+
import { legacy } from "@dybo-ai/design/tokens";
|
|
315
|
+
|
|
316
|
+
legacy.color.brand.blue; // "#5878a7"
|
|
317
|
+
legacy.color.semantic.danger.solid; // "#a21a17"
|
|
301
318
|
```
|
|
302
319
|
|
|
303
320
|
---
|
|
@@ -317,20 +334,31 @@ import logoDark from "@dybo-ai/design/assets/logo-dybo-01-dark.png"; // PNG tran
|
|
|
317
334
|
All tokens are CSS custom properties. To override selectively:
|
|
318
335
|
|
|
319
336
|
```css
|
|
320
|
-
/* Override in a specific component */
|
|
321
|
-
.my-sidebar {
|
|
322
|
-
--dybo-sidebar-bg: #0a1323;
|
|
323
|
-
--dybo-sidebar-width: 260px;
|
|
324
|
-
}
|
|
325
|
-
|
|
326
337
|
/* Global override */
|
|
327
338
|
:root {
|
|
328
|
-
--
|
|
339
|
+
--primary: 220 60% 15%; /* your ink shade, as an HSL triplet */
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
/* Dark mode override */
|
|
343
|
+
.dark {
|
|
344
|
+
--card: 220 30% 10%;
|
|
329
345
|
}
|
|
330
346
|
```
|
|
331
347
|
|
|
332
348
|
---
|
|
333
349
|
|
|
350
|
+
## Legacy system (pre-2.0)
|
|
351
|
+
|
|
352
|
+
If an app still needs the visual system this package shipped before `2.0.0` (built independently of DYBO's real product screens), import `legacy-theme.css` instead of `theme.css` — same `.dybo-*` class names, old values, no other code changes needed:
|
|
353
|
+
|
|
354
|
+
```js
|
|
355
|
+
import "@dybo-ai/design/legacy-theme.css";
|
|
356
|
+
```
|
|
357
|
+
|
|
358
|
+
Programmatic legacy values are under `legacy` in `@dybo-ai/design/tokens` (see "Tokens in JS/TS" above). This path is frozen and will be removed in `3.0` — new work should use the default `theme.css`.
|
|
359
|
+
|
|
360
|
+
---
|
|
361
|
+
|
|
334
362
|
## Publishing guide
|
|
335
363
|
|
|
336
364
|
For maintainers (how to publish a new version): see [`docs/PUBLISHING.md`](./docs/PUBLISHING.md).
|