Mercurial
diff design_system/README.md @ 258:60a876c4587a
[ui] Add semantic primitive ownership
Build a layered Zenbu token and sizing system, make authored controls use native-underneath primitives, migrate mrjunejune without imposing visual surfaces, and document/enforce HTML ownership in the catalog and wiki.
Co-authored-by: Copilot <[email protected]>
| author | MrJuneJune <me@mrjunejune.com> |
|---|---|
| date | Wed, 05 Aug 2026 05:25:40 -0700 |
| parents | 30c2196d03d4 |
| children |
line wrap: on
line diff
--- a/design_system/README.md Tue Aug 04 16:49:11 2026 -0700 +++ b/design_system/README.md Wed Aug 05 05:25:40 2026 -0700 @@ -4,10 +4,11 @@ It stays close to ordinary HTML: components wrap native controls and sectioning elements instead of replacing their semantics. -The catalog includes native Zenbu implementations of all 65 concepts currently -listed by shadcn/ui. These are original Web Components using Zenbu tokens, not -ports of shadcn's React, Radix, or third-party runtime. See +The catalog includes native Zenbu component concepts and composition patterns. +They are original dependency-free Web Components using Zenbu tokens. +See [`COMPONENTS.md`](COMPONENTS.md) for the complete mapping and HTML contracts. +Future HTML work follows the [`Zenbu UI wiki`](wiki/README.md). ## Catalog @@ -20,8 +21,7 @@ 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: +The first-party catalog renders stories declared as HTML templates: ```html <zen-story name="Primary button"> @@ -54,11 +54,15 @@ <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. See [`COLORS.md`](COLORS.md) for the complete warm color ramps, -material aliases, semantic roles, dark-theme behavior, and data palette. +Canonical tokens use the layered +[`--zenbu-ref-*` / `--zenbu-sys-*` architecture](TOKENS.md) and can be +overridden at an application boundary; older `--zen-*` names remain +compatibility aliases. See [`COLORS.md`](COLORS.md) for color roles and theme +behavior. Named [`themes`](THEMES.md) compose those tokens as Paper, Ink, and Playful experiences in addition to automatic system light/dark behavior. +The [`sizing scale`](SIZING.md) defines shared `xs` through `xl` typography, +control, icon, gap, and padding primitives. Use [`zen-icon`](ICONS.md) for all interface iconography. Design-system source does not use emoji, ad hoc SVG, icon fonts, or third-party icon packages. @@ -74,10 +78,11 @@ | Component family | 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-button` | direct `button` or `a` | `appearance`, `variant`, `loading`, `disabled` | native click/form events | +| `zen-card` | direct `article` or `section` | `appearance`, `interactive` | native descendant events | +| `zen-link` | direct `a` | `effect` | native navigation 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-field` | direct `label`, form control, help text | `appearance`, native control attributes | native input/change/invalid | | `zen-notifications` | descendant event producers | `aria-label`, `dismiss-label` | `zen-notification-action`, `zen-notification-removed` | | `zen-stack` | any HTML | `direction`, `gap` | native descendant events | | Disclosure and tabs | `details`, `summary`, buttons, sections | `multiple`, `activation` | `zen-change` | @@ -89,6 +94,14 @@ presentation, small accessibility wiring, and interaction affordances while applications retain data and workflow ownership. +Use `appearance="plain"` when an application needs component behavior without +the Zenbu visual recipe. Plain buttons remove browser chrome, plain cards add +no surface treatment, and plain fields keep label/validity wiring while leaving +the application's control CSS untouched. + +`zen-link effect="paw"` adds the first-party paw decoration and hover motion +while preserving the native anchor and all application-authored link styles. + ### Notifications See [`NOTIFICATIONS.md`](NOTIFICATIONS.md) for the complete event contract, @@ -128,6 +141,6 @@ ## Tests ```bash -bazel test //design_system/test:storybook_test +bazel test //design_system/test:catalog_test bazel build //design_system:design_system_server_bundle ```