@harmonia-core/ui 1.2.5 → 1.2.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 +34 -11
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -16,7 +16,7 @@ npm install @harmonia-core/ui @renge-ui/tokens motion
|
|
|
16
16
|
pnpm add @harmonia-core/ui @renge-ui/tokens motion
|
|
17
17
|
```
|
|
18
18
|
|
|
19
|
-
`@renge-ui/tokens` is a required peer dependency. It provides the
|
|
19
|
+
`@renge-ui/tokens` is a required peer dependency. It provides the `--renge-*` CSS custom properties (φ-based typography, Fibonacci spacing, OKLCH colors, natural motion) that the capacity system's utilities reference.
|
|
20
20
|
|
|
21
21
|
### Peer dependencies
|
|
22
22
|
|
|
@@ -24,7 +24,7 @@ pnpm add @harmonia-core/ui @renge-ui/tokens motion
|
|
|
24
24
|
{
|
|
25
25
|
"react": ">=18.0.0",
|
|
26
26
|
"react-dom": ">=18.0.0",
|
|
27
|
-
"@renge-ui/tokens": "^2.2.
|
|
27
|
+
"@renge-ui/tokens": "^2.2.4",
|
|
28
28
|
"motion": ">=11.0.0"
|
|
29
29
|
}
|
|
30
30
|
```
|
|
@@ -33,28 +33,35 @@ pnpm add @harmonia-core/ui @renge-ui/tokens motion
|
|
|
33
33
|
|
|
34
34
|
## Setup
|
|
35
35
|
|
|
36
|
-
### 1.
|
|
36
|
+
### 1. Load the design tokens
|
|
37
37
|
|
|
38
|
-
|
|
38
|
+
Import the pre-built CSS file once in your root layout and set `data-profile` on `<html>` to activate a color profile. The capacity system manipulates `--renge-*` CSS custom properties at runtime — these are live CSS vars, so the static file is compatible with runtime adaptation.
|
|
39
39
|
|
|
40
40
|
```tsx
|
|
41
41
|
// app/layout.tsx (Next.js App Router)
|
|
42
|
-
import
|
|
42
|
+
import "@renge-ui/tokens/renge.css"
|
|
43
43
|
|
|
44
44
|
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
|
45
|
-
const theme = createRengeTheme({ profile: "ocean" })
|
|
46
|
-
|
|
47
45
|
return (
|
|
48
|
-
<html lang="en">
|
|
49
|
-
<head>
|
|
50
|
-
<style dangerouslySetInnerHTML={{ __html: theme }} />
|
|
51
|
-
</head>
|
|
46
|
+
<html lang="en" data-profile="ocean">
|
|
52
47
|
<body>{children}</body>
|
|
53
48
|
</html>
|
|
54
49
|
)
|
|
55
50
|
}
|
|
56
51
|
```
|
|
57
52
|
|
|
53
|
+
Available profiles: `ocean` (default), `earth`, `twilight`, `fire`, `void`, `leaf`. Add `data-mode="dark"` for explicit dark mode — otherwise `prefers-color-scheme` is respected automatically.
|
|
54
|
+
|
|
55
|
+
**For scoped theming** (e.g. a section of your app with a different profile), use `createRengeTheme()` directly:
|
|
56
|
+
|
|
57
|
+
```tsx
|
|
58
|
+
import { createRengeTheme } from "@renge-ui/tokens"
|
|
59
|
+
|
|
60
|
+
const sectionTheme = createRengeTheme({ profile: "fire", mode: "dark", selector: ".my-section" })
|
|
61
|
+
|
|
62
|
+
// inject sectionTheme.css as a <style> tag
|
|
63
|
+
```
|
|
64
|
+
|
|
58
65
|
### 2. Wrap your app with CapacityProvider
|
|
59
66
|
|
|
60
67
|
```tsx
|
|
@@ -272,6 +279,22 @@ Four human-readable labels derived from raw inputs, first match wins:
|
|
|
272
279
|
| `useEmotionalValenceField()` | `FieldValue<number>` | Live valence field |
|
|
273
280
|
| `usePrefersReducedMotion()` | `boolean` | System prefers-reduced-motion query |
|
|
274
281
|
|
|
282
|
+
### `rengeVars` (from `@renge-ui/tokens`)
|
|
283
|
+
|
|
284
|
+
Typed CSS variable references — use instead of raw `"var(--renge-*)"` strings for IDE autocomplete and guaranteed correctness:
|
|
285
|
+
|
|
286
|
+
```ts
|
|
287
|
+
import { rengeVars } from "@renge-ui/tokens"
|
|
288
|
+
|
|
289
|
+
style={{ animationDelay: rengeVars.duration[3] }} // "var(--renge-duration-3)"
|
|
290
|
+
style={{ padding: rengeVars.space[4] }} // "var(--renge-space-4)"
|
|
291
|
+
style={{ fontSize: rengeVars.fontSize.lg }} // "var(--renge-font-size-lg)"
|
|
292
|
+
style={{ color: rengeVars.color.accent }} // "var(--renge-color-accent)"
|
|
293
|
+
style={{ borderRadius: rengeVars.radius[2] }} // "var(--renge-radius-2)"
|
|
294
|
+
```
|
|
295
|
+
|
|
296
|
+
Groups: `color`, `space`, `fontSize`, `lineHeight`, `duration`, `easing`, `radius`.
|
|
297
|
+
|
|
275
298
|
### Functions
|
|
276
299
|
|
|
277
300
|
| Function | Signature | Description |
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@harmonia-core/ui",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.6",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "A capacity-adaptive UI framework that treats human cognitive, temporal, and emotional state as first-class inputs. Derives interface modes (density, motion, contrast, focus) from explicit user state — no inference, no profiling.",
|
|
6
6
|
"keywords": [
|