@hachej/boring-ui-kit 0.1.40 → 0.1.42
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 +16 -10
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -124,22 +124,28 @@ Then every UI kit component picks up those variables automatically.
|
|
|
124
124
|
Override any CSS variable at any scope:
|
|
125
125
|
|
|
126
126
|
```css
|
|
127
|
-
/* Use :root for normal React apps, :host for Shadow DOM
|
|
127
|
+
/* Use :root for normal React apps, :host for Shadow DOM.
|
|
128
|
+
Token values are color/length primitives, not CSS shorthands.
|
|
129
|
+
The canonical defaults ship in @hachej/boring-ui-kit/tokens.css. */
|
|
128
130
|
:root {
|
|
129
|
-
--boring-
|
|
130
|
-
--boring-
|
|
131
|
-
--boring-
|
|
132
|
-
--boring-
|
|
133
|
-
/* ...
|
|
131
|
+
--boring-background: oklch(0.18 0.004 72);
|
|
132
|
+
--boring-foreground: oklch(0.985 0.002 72);
|
|
133
|
+
--boring-border: oklch(0.269 0.006 285.885);
|
|
134
|
+
--boring-radius: 0.625rem;
|
|
135
|
+
/* ... full token set in tokens.css; see styles.css for the utility mapping */
|
|
134
136
|
}
|
|
135
137
|
```
|
|
136
138
|
|
|
137
139
|
### Theming
|
|
138
140
|
|
|
141
|
+
Import the default palette, then override individual `--boring-*` variables:
|
|
142
|
+
|
|
139
143
|
```css
|
|
144
|
+
@import "@hachej/boring-ui-kit/tokens.css";
|
|
145
|
+
|
|
140
146
|
.my-green-panel {
|
|
141
|
-
--boring-
|
|
142
|
-
--boring-
|
|
147
|
+
--boring-primary: oklch(0.72 0.19 150);
|
|
148
|
+
--boring-accent: oklch(0.72 0.19 150);
|
|
143
149
|
}
|
|
144
150
|
```
|
|
145
151
|
|
|
@@ -258,9 +264,9 @@ The kit uses class-variance-authority (CVA) for consistent variant patterns:
|
|
|
258
264
|
|
|
259
265
|
| Error | Cause | Fix |
|
|
260
266
|
|-------|-------|-----|
|
|
261
|
-
| Unstyled components |
|
|
267
|
+
| Unstyled components | No utility CSS loaded | Import `@hachej/boring-ui-kit/styles.css` once (it ships the Tailwind utilities the kit needs); a full workspace app already loads `@hachej/boring-workspace/globals.css` |
|
|
268
|
+
| Wrong/missing colors | `--boring-*` tokens not set | Import `@hachej/boring-ui-kit/tokens.css` or set the tokens yourself |
|
|
262
269
|
| `Cannot find module` | Package not built | Run `pnpm --filter @hachej/boring-ui-kit build` |
|
|
263
|
-
| Dialog not showing | Portal container missing | Ensure `<div id="overlay-root">` exists in your DOM |
|
|
264
270
|
| Theme looks wrong | CSS vars overridden elsewhere | Check specificity — your vars should be at `:root` or `html` scope |
|
|
265
271
|
|
|
266
272
|
---
|