@hirobius/design-system 0.9.0 → 0.11.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/README.md +33 -1
- package/dist/hirobius-ui.js +1559 -1426
- package/dist/manifest.js +1 -1
- package/dist/styles.css +1 -1
- package/dist/tokens.css +1 -1
- package/dist/tokens.js +12 -4
- package/dist/types/src/app/components/hds-tooltip.d.ts +45 -0
- package/dist/types/src/app/components/textarea.d.ts +38 -0
- package/dist/types/src/app/context/hds-theme.d.ts +68 -0
- package/dist/types/src/app/design-system/generated-token-refs.d.ts +7 -0
- package/dist/types/src/index.d.ts +17 -0
- package/dist/variables.css +6 -0
- package/hirobius.tokens.json +13 -0
- package/package.json +8 -13
- package/public/hds-manifest.json +101 -4
- package/protocol/envelope.mjs +0 -201
- package/protocol/figma-snapshot.schema.json +0 -190
package/README.md
CHANGED
|
@@ -30,6 +30,39 @@ No router, Tailwind config, or font files needed. With a router, inject it once
|
|
|
30
30
|
via `<HdsRouterProvider>`. See **[docs/CONSUMING.md](docs/CONSUMING.md)** for the
|
|
31
31
|
router seam, `data-hds` scoping, and MUI coexistence.
|
|
32
32
|
|
|
33
|
+
### Theming: the four dials
|
|
34
|
+
|
|
35
|
+
HDS theming is driven by root attributes + CSS variables, so it works with **zero
|
|
36
|
+
JavaScript** — set them on any element (React, Astro, plain HTML) and every HDS
|
|
37
|
+
descendant re-skins:
|
|
38
|
+
|
|
39
|
+
| Dial | Attribute / var | Values | Default |
|
|
40
|
+
| --- | --- | --- | --- |
|
|
41
|
+
| theme | `data-theme` | `dark` | light (unset) |
|
|
42
|
+
| density | `data-density` | `compact` | comfortable (unset) |
|
|
43
|
+
| brand | `data-brand` (+ `data-tenant` alias) | overlay slug | base (unset) |
|
|
44
|
+
| font | `--hds-font-family` / `--hds-font-family-mono` | any font-family | Satoshi / Geist Mono |
|
|
45
|
+
|
|
46
|
+
```html
|
|
47
|
+
<!-- zero-JS: static markup (e.g. an Astro layout) -->
|
|
48
|
+
<div data-hds data-theme="dark" data-density="compact" data-brand="acme"
|
|
49
|
+
style="--hds-font-family: 'Inter', sans-serif">
|
|
50
|
+
…
|
|
51
|
+
</div>
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
React apps can set the same contract declaratively with the typed
|
|
55
|
+
`<HdsThemeProvider>` (renders the `data-hds` scope wrapper) and read it back with
|
|
56
|
+
`useHdsTheme()` — it is a convenience, not a requirement:
|
|
57
|
+
|
|
58
|
+
```tsx
|
|
59
|
+
import { HdsThemeProvider } from '@hirobius/design-system';
|
|
60
|
+
|
|
61
|
+
<HdsThemeProvider theme="dark" density="compact" brand="acme">
|
|
62
|
+
<App />
|
|
63
|
+
</HdsThemeProvider>;
|
|
64
|
+
```
|
|
65
|
+
|
|
33
66
|
## Developing this repo
|
|
34
67
|
|
|
35
68
|
```bash
|
|
@@ -90,7 +123,6 @@ Typical loop:
|
|
|
90
123
|
## Bundle and release hygiene
|
|
91
124
|
|
|
92
125
|
- `pnpm check:size` builds the library bundle and runs `size-limit`.
|
|
93
|
-
- `pnpm perf:budget` runs Lighthouse CI assertions for page performance budgets.
|
|
94
126
|
- `pnpm check:release` runs the full release gate (accessibility, responsive, collision, visual, and bundle-size checks).
|
|
95
127
|
|
|
96
128
|
Releases are cut with [Changesets](https://github.com/changesets/changesets): a merged changeset opens a "Version Packages" PR, and merging that PR publishes the new version to public npm via `.github/workflows/release.yml`.
|