hanap-labs 2.0.5 → 2.0.6
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 +52 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -166,6 +166,58 @@ Example:
|
|
|
166
166
|
}
|
|
167
167
|
```
|
|
168
168
|
|
|
169
|
+
### Global Theme CSS Custom Properties
|
|
170
|
+
|
|
171
|
+
All global theme tokens are available as CSS custom properties prefixed with `--hanap-labs-`.
|
|
172
|
+
|
|
173
|
+
#### Color Tokens
|
|
174
|
+
|
|
175
|
+
| Property | Description | Light Mode Default | Dark Mode Default |
|
|
176
|
+
| --- | --- | --- | --- |
|
|
177
|
+
| `--hanap-labs-primary` | Primary brand color | `#15803d` | `#85bb65` |
|
|
178
|
+
| `--hanap-labs-secondary` | Secondary brand color | `#9fcb98` | `#3e5f4a` |
|
|
179
|
+
| `--hanap-labs-tertiary` | Tertiary brand color | `#79ae6f` | `#2f4a39` |
|
|
180
|
+
| `--hanap-labs-success` | Success state color | `#059669` | `#34d399` |
|
|
181
|
+
| `--hanap-labs-danger` | Danger/error state color | `#dc2626` | `#f87171` |
|
|
182
|
+
| `--hanap-labs-warning` | Warning state color | `#f59e0b` | `#fbbf24` |
|
|
183
|
+
| `--hanap-labs-info` | Info state color | `#38bdf8` | `#60a5fa` |
|
|
184
|
+
| `--hanap-labs-light` | Light neutral color | `#ede9e6` | `#1f2937` |
|
|
185
|
+
| `--hanap-labs-dark` | Dark neutral color | `#030712` | `#030712` |
|
|
186
|
+
| `--hanap-labs-muted` | Muted neutral color | `#6b8274` | `#9ca3af` |
|
|
187
|
+
|
|
188
|
+
#### Surface Tokens
|
|
189
|
+
|
|
190
|
+
| Property | Description | Light Mode Default | Dark Mode Default |
|
|
191
|
+
| --- | --- | --- | --- |
|
|
192
|
+
| `--hanap-labs-surface` | Primary surface background | `#ffffff` | `#0f172a` |
|
|
193
|
+
| `--hanap-labs-surface-subtle` | Subtle surface background | `#f8fafc` | `#111827` |
|
|
194
|
+
| `--hanap-labs-surface-muted` | Muted surface background | `#f1f5f9` | `#1f2937` |
|
|
195
|
+
| `--hanap-labs-overlay` | Overlay/backdrop color | `rgba(15, 23, 42, 0.55)` | `rgba(2, 6, 23, 0.72)` |
|
|
196
|
+
|
|
197
|
+
#### Border Tokens
|
|
198
|
+
|
|
199
|
+
| Property | Description | Light Mode Default | Dark Mode Default |
|
|
200
|
+
| --- | --- | --- | --- |
|
|
201
|
+
| `--hanap-labs-border-default` | Default border color | `#e5e7eb` | `#334155` |
|
|
202
|
+
| `--hanap-labs-border-strong` | Strong border color | `#cbd5e1` | `#475569` |
|
|
203
|
+
|
|
204
|
+
#### Text Tokens
|
|
205
|
+
|
|
206
|
+
| Property | Description | Light Mode Default | Dark Mode Default |
|
|
207
|
+
| --- | --- | --- | --- |
|
|
208
|
+
| `--hanap-labs-text-default` | Default text color | `#0f172a` | `#f8fafc` |
|
|
209
|
+
| `--hanap-labs-text-muted` | Muted text color | `#64748b` | `#94a3b8` |
|
|
210
|
+
| `--hanap-labs-text-subtle` | Subtle text color | `#475569` | `#cbd5e1` |
|
|
211
|
+
| `--hanap-labs-text-light` | Light text color (for dark backgrounds) | `#ffffff` | `#030712` |
|
|
212
|
+
| `--hanap-labs-text-primary` | Primary text color | `#15803d` | `#85bb65` |
|
|
213
|
+
| `--hanap-labs-text-theme` | Theme text color | `#0f172a` | `#f8fafc` |
|
|
214
|
+
|
|
215
|
+
#### Typography Tokens
|
|
216
|
+
|
|
217
|
+
| Property | Description | Default |
|
|
218
|
+
| -------------------------- | ----------- | ------------------------- |
|
|
219
|
+
| `--hanap-labs-font-family` | Font family | `"Work Sans", sans-serif` |
|
|
220
|
+
|
|
169
221
|
## TanStack Vue Query Setup (`useQuery`)
|
|
170
222
|
|
|
171
223
|
The `useQuery` and `useMutation` composables require TanStack Vue Query (optional peer dependency) to be installed, then registered once.
|