Mercurial

comparison design_system/README.md @ 251:117c4d53c9a4

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[ui] Add HTML-first Web Component system Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Tue, 04 Aug 2026 09:14:57 -0700
parents
children 7a7581f040e8
comparison
equal deleted inserted replaced
250:745fd127b2a1 251:117c4d53c9a4
1 # Zenbu UI design system
2
3 Zenbu UI is a dependency-free set of light-DOM Web Components and CSS tokens.
4 It stays close to ordinary HTML: components wrap native controls and sectioning
5 elements instead of replacing their semantics.
6
7 ## Catalog
8
9 Run the Seobeo-backed component catalog:
10
11 ```bash
12 bazel run //design_system:dev
13 ```
14
15 Open `http://127.0.0.1:6980`. Override the port with
16 `DESIGN_SYSTEM_PORT`.
17
18 The catalog is intentionally Storybook-like without depending on Storybook. Its
19 stories are declared as HTML templates:
20
21 ```html
22 <zen-story name="Primary button">
23 <template>
24 <zen-button>
25 <button type="button">Save</button>
26 </zen-button>
27 </template>
28 </zen-story>
29 ```
30
31 The story component renders the example and its source side by side.
32
33 ## Reuse
34
35 Reusable assets are public Bazel targets:
36
37 ```text
38 //design_system:components
39 //design_system:styles
40 //design_system:web_assets
41 ```
42
43 Applications should copy the assets while preserving `components/` and
44 `styles/`, then load:
45
46 ```html
47 <link rel="stylesheet" href="/design-system/styles/tokens.css">
48 <link rel="stylesheet" href="/design-system/styles/components.css">
49 <script type="module" src="/design-system/components/index.js"></script>
50 ```
51
52 Every visual token is a `--zen-*` custom property and can be overridden by the
53 application.
54
55 ## Native HTML contract
56
57 | Component | Native content | Attributes | Events |
58 | --- | --- | --- | --- |
59 | `zen-button` | direct `button` or `a` | `variant`, `loading`, `disabled` | native click/form events |
60 | `zen-card` | direct `article` or `section` | `interactive` | native descendant events |
61 | `zen-alert` | message HTML | `tone`, `dismissible` | `zen-dismiss` |
62 | `zen-field` | direct `label`, form control, help text | native control attributes | native input/change/invalid |
63 | `zen-stack` | any HTML | `direction`, `gap` | native descendant events |
64
65 Do not put business state into the design-system components. They provide
66 presentation, small accessibility wiring, and interaction affordances while
67 applications retain data and workflow ownership.
68
69 ## Tests
70
71 ```bash
72 bazel test //design_system/test:storybook_test
73 bazel build //design_system:design_system_server_bundle
74 ```