advi-ui 0.7.0 → 0.8.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 +25 -14
- package/dist/advi-ui.cjs.js +11 -11
- package/dist/advi-ui.cjs.js.map +1 -1
- package/dist/advi-ui.css +1 -1
- package/dist/advi-ui.es.js +1744 -1595
- package/dist/advi-ui.es.js.map +1 -1
- package/dist/base.css +1 -1
- package/dist/src/components/ui/button-variants.d.ts +1 -1
- package/dist/src/index.d.ts +1 -0
- package/dist/src/theme/index.d.ts +4 -0
- package/dist/src/theme/theme-context.d.ts +10 -0
- package/dist/src/theme/theme-provider.d.ts +13 -0
- package/dist/src/theme/tokens.d.ts +11 -0
- package/dist/src/theme/tokens.test.d.ts +1 -0
- package/dist/src/theme/use-theme.d.ts +1 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -59,39 +59,50 @@ pnpm add advi-ui
|
|
|
59
59
|
|
|
60
60
|
## Usage
|
|
61
61
|
|
|
62
|
-
Import components and styles once at the root of your app
|
|
62
|
+
Import components and structural styles once at the root of your app,
|
|
63
|
+
then supply a theme — either via React (`ThemeProvider`, recommended for
|
|
64
|
+
runtime switching) or a plain CSS import:
|
|
63
65
|
|
|
64
66
|
```tsx
|
|
65
|
-
import { Button } from "advi-ui";
|
|
66
|
-
import "advi-ui/base";
|
|
67
|
-
import "advi-ui/theme/default"; // a built-in color theme — or supply your own, see THEMING.md
|
|
67
|
+
import { Button, ThemeProvider } from "advi-ui";
|
|
68
|
+
import "advi-ui/base"; // component styles + Tailwind base, no colors
|
|
68
69
|
import "advi-ui/fonts"; // optional — self-hosted Raleway, Unbounded, Rubik
|
|
69
70
|
|
|
70
71
|
export default function App() {
|
|
71
|
-
return
|
|
72
|
+
return (
|
|
73
|
+
<ThemeProvider theme="default" mode="system">
|
|
74
|
+
<Button variant="outline">Hello</Button>
|
|
75
|
+
</ThemeProvider>
|
|
76
|
+
);
|
|
72
77
|
}
|
|
73
78
|
```
|
|
74
79
|
|
|
75
80
|
`advi-ui/base` brings in all component styles (SCSS, BEM `vi-*` namespace)
|
|
76
|
-
and the Tailwind base layer — no color values
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
full variable contract and
|
|
81
|
+
and the Tailwind base layer — no color values; a theme supplies those.
|
|
82
|
+
`ThemeProvider` ships two built-in themes (`"default"`, `"midnight"`),
|
|
83
|
+
supports runtime switching (`useTheme().setTheme`/`setMode`), and lets you
|
|
84
|
+
register your own via its `themes` prop — see [THEMING.md](./THEMING.md)
|
|
85
|
+
for the full API, the variable contract, and the CSS-only alternative
|
|
86
|
+
(`advi-ui/theme/default`, `advi-ui/theme/midnight`, or your own `:root`
|
|
87
|
+
block) for non-React or SSR-sensitive consumers.
|
|
81
88
|
|
|
82
|
-
`advi-ui/styles` still works as a single import equal to `base` +
|
|
83
|
-
`theme/default`, for existing consumers who don't need
|
|
89
|
+
`advi-ui/styles` still works as a single CSS import equal to `base` +
|
|
90
|
+
`theme/default`, for existing consumers who don't need `ThemeProvider`.
|
|
84
91
|
|
|
85
92
|
The fonts import is separate and optional — it's a small CSS file (`@font-face` declarations with `unicode-range`), so the browser only downloads the specific weight/subset files it actually needs for the text on the page, not the whole font family. Skip it if you'd rather supply your own fonts or use `font-raleway`/`font-unbounded`/`font-rubik` Tailwind classes with fonts you already load.
|
|
86
93
|
|
|
87
94
|
### Dark mode
|
|
88
95
|
|
|
89
|
-
|
|
96
|
+
With `ThemeProvider`, pass `mode="dark"` (or `"light"`/`"system"`, the
|
|
97
|
+
default) — switch it at runtime with `useTheme().setMode(...)`. Without
|
|
98
|
+
it (the CSS-only path), toggle the `dark` class on `<html>` yourself:
|
|
90
99
|
|
|
91
100
|
```ts
|
|
92
101
|
document.documentElement.classList.toggle("dark");
|
|
93
102
|
```
|
|
94
103
|
|
|
104
|
+
See [THEMING.md](./THEMING.md) for the full `ThemeProvider` API.
|
|
105
|
+
|
|
95
106
|
### Icons
|
|
96
107
|
|
|
97
108
|
Components ship with [lucide-react](https://lucide.dev) icons by default —
|
|
@@ -143,7 +154,7 @@ element you pass, so overrides don't need to replicate the built-in classes.
|
|
|
143
154
|
|
|
144
155
|
## Design Tokens
|
|
145
156
|
|
|
146
|
-
All colors are semantic CSS custom properties, supplied
|
|
157
|
+
All colors are semantic CSS custom properties, supplied via `ThemeProvider` or a theme import, and switchable between light/dark (and any custom theme) at runtime — see [THEMING.md](./THEMING.md) for the full contract.
|
|
147
158
|
|
|
148
159
|
### Fonts
|
|
149
160
|
|