Mercurial
diff design_system/README.md @ 251:117c4d53c9a4
[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 |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/design_system/README.md Tue Aug 04 09:14:57 2026 -0700 @@ -0,0 +1,74 @@ +# Zenbu UI design system + +Zenbu UI is a dependency-free set of light-DOM Web Components and CSS tokens. +It stays close to ordinary HTML: components wrap native controls and sectioning +elements instead of replacing their semantics. + +## Catalog + +Run the Seobeo-backed component catalog: + +```bash +bazel run //design_system:dev +``` + +Open `http://127.0.0.1:6980`. Override the port with +`DESIGN_SYSTEM_PORT`. + +The catalog is intentionally Storybook-like without depending on Storybook. Its +stories are declared as HTML templates: + +```html +<zen-story name="Primary button"> + <template> + <zen-button> + <button type="button">Save</button> + </zen-button> + </template> +</zen-story> +``` + +The story component renders the example and its source side by side. + +## Reuse + +Reusable assets are public Bazel targets: + +```text +//design_system:components +//design_system:styles +//design_system:web_assets +``` + +Applications should copy the assets while preserving `components/` and +`styles/`, then load: + +```html +<link rel="stylesheet" href="/design-system/styles/tokens.css"> +<link rel="stylesheet" href="/design-system/styles/components.css"> +<script type="module" src="/design-system/components/index.js"></script> +``` + +Every visual token is a `--zen-*` custom property and can be overridden by the +application. + +## Native HTML contract + +| Component | Native content | Attributes | Events | +| --- | --- | --- | --- | +| `zen-button` | direct `button` or `a` | `variant`, `loading`, `disabled` | native click/form events | +| `zen-card` | direct `article` or `section` | `interactive` | native descendant events | +| `zen-alert` | message HTML | `tone`, `dismissible` | `zen-dismiss` | +| `zen-field` | direct `label`, form control, help text | native control attributes | native input/change/invalid | +| `zen-stack` | any HTML | `direction`, `gap` | native descendant events | + +Do not put business state into the design-system components. They provide +presentation, small accessibility wiring, and interaction affordances while +applications retain data and workflow ownership. + +## Tests + +```bash +bazel test //design_system/test:storybook_test +bazel build //design_system:design_system_server_bundle +```