@nxds/core 0.12.0 → 0.14.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 +11 -2
- package/dist/runtime/catalogue.cjs +1070 -742
- package/dist/runtime/catalogue.cjs.map +1 -1
- package/dist/runtime/catalogue.d.cts +40 -16
- package/dist/runtime/catalogue.d.ts +40 -16
- package/dist/runtime/catalogue.js +1070 -742
- package/dist/runtime/catalogue.js.map +1 -1
- package/dist/runtime/index.cjs +140 -390
- package/dist/runtime/index.cjs.map +1 -1
- package/dist/runtime/index.d.cts +5 -5
- package/dist/runtime/index.d.ts +5 -5
- package/dist/runtime/index.js +137 -390
- package/dist/runtime/index.js.map +1 -1
- package/dist/runtime/palette.cjs.map +1 -1
- package/dist/runtime/palette.js.map +1 -1
- package/dist/runtime/{surface-ladder-CAjRqzCx.d.ts → surface-ladder-B8LyPHC_.d.ts} +64 -3
- package/dist/runtime/{surface-ladder-tv7B_RKy.d.cts → surface-ladder-DQ9Yfwie.d.cts} +64 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -63,7 +63,7 @@ Custom brand ramps and raw surface-tone references retain their separate algorit
|
|
|
63
63
|
|
|
64
64
|
## Token catalogue
|
|
65
65
|
|
|
66
|
-
The browser-safe `@nxds/core/catalogue` entry describes every token family for tools and docs: colour, typography, spacing, radius, border width, shadow, motion, z-index, and
|
|
66
|
+
The browser-safe `@nxds/core/catalogue` entry describes every token family for tools and docs: colour, typography, spacing, radius, border width, shadow, motion, z-index, breakpoints, and the UI scale factor and page widths. Each token has its `--nx-*` name, aliases, values per theme mode and preset as the generated CSS declares them, the authored source leaf, and the appearance settings that write it. It builds a fresh array and derives both runtime colour modes on each call, so call it once per build or page, not per render.
|
|
67
67
|
|
|
68
68
|
```ts
|
|
69
69
|
import { createTokenCatalogue } from '@nxds/core/catalogue';
|
|
@@ -71,6 +71,15 @@ import { createTokenCatalogue } from '@nxds/core/catalogue';
|
|
|
71
71
|
const tokens = createTokenCatalogue();
|
|
72
72
|
```
|
|
73
73
|
|
|
74
|
+
Pass an appearance to read the tokens at that appearance. Colours and type sizes follow it.
|
|
75
|
+
|
|
76
|
+
```ts
|
|
77
|
+
const rose = createTokenCatalogue({
|
|
78
|
+
...DEFAULT_NXDS_APPEARANCE,
|
|
79
|
+
brandColor: '#e11d48',
|
|
80
|
+
});
|
|
81
|
+
```
|
|
82
|
+
|
|
74
83
|
## Non-React Shell Example
|
|
75
84
|
|
|
76
85
|
Use the engine directly when a host shell owns DOM or native styling.
|
|
@@ -139,7 +148,7 @@ All tokens follow the [Design Tokens Community Group](https://tr.designtokens.or
|
|
|
139
148
|
- Output: Tailwind v4 `@theme` block (semantic color via `@theme inline`, accepting runtime `--nx-color-*` overrides) + per-mode `[data-density="X"]` blocks
|
|
140
149
|
- Example: `--color-background: var(--nx-color-background, oklch(1 0 0))` (engine color floor), `--nx-spacing-4: 16px`
|
|
141
150
|
|
|
142
|
-
> **Spacing is two-tier, not three.** Unlike color/radius/shadow/typography, spacing has no `--nx-size-*` primitive layer — `semantic/spacing-{mode}.json` files carry direct px
|
|
151
|
+
> **Spacing is two-tier, not three.** Unlike color/radius/shadow/typography, spacing has no `--nx-size-*` primitive layer — `semantic/spacing-{mode}.json` files carry direct px steps and role tokens that reference a step in the same file (`{spacing.6}`), and the build emits per-mode `[data-density="X"]` blocks plus role utilities (`nx:p-container`, `nx:gap-layout-section`, …). Mode swap is runtime via the `data-density` attribute on `<html>`.
|
|
143
152
|
|
|
144
153
|
**Component** (future)
|
|
145
154
|
|