@hirobius/design-system 0.10.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 -0
- 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 +7 -3
- package/public/hds-manifest.json +101 -4
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
|