@godxjp/ui 31.25.3 → 31.25.4
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/agent/START-HERE.md +4 -4
- package/agent/index.json +4 -4
- package/agent/llms.txt +5 -5
- package/agent/tokens.json +6 -0
- package/dist/contracts/measurement.json +1 -1
- package/dist/styles/control.css +20 -9
- package/dist/styles/dialog-layout.css +3 -7
- package/dist/styles/layers.json +1 -1
- package/dist/styles/navigation-layout.css +5 -0
- package/dist/tokens/components/control.css +4 -0
- package/package.json +2 -2
package/agent/START-HERE.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
You are about to write code against a design system you did not author. This file is the whole
|
|
4
4
|
contract. Read it before you write JSX.
|
|
5
5
|
|
|
6
|
-
**This catalog describes `@godxjp/ui` 31.25.
|
|
6
|
+
**This catalog describes `@godxjp/ui` 31.25.4.** If the project you are editing has a different
|
|
7
7
|
version in its `package.json`, read the pinned catalog for THAT version instead
|
|
8
8
|
(`…/v<their-version>/agent/…`). A catalog newer than the installed package describes props that do
|
|
9
9
|
not exist yet; older, and it hides props that do. Neither failure announces itself.
|
|
@@ -56,10 +56,10 @@ Then ask it: `search_components`, `get_component`, `get_tokens`, `get_rule`, `li
|
|
|
56
56
|
its `importPath`, and its examples. Fetch only the handful you picked in step 1.
|
|
57
57
|
3. `rules.json` — 50 cardinal rules. The ones about raw HTML and hardcoded colour are not
|
|
58
58
|
style advice.
|
|
59
|
-
4. `tokens.json` —
|
|
59
|
+
4. `tokens.json` — 2136 design tokens, each tagged with its `tier`. **If you were handed a
|
|
60
60
|
brand, read the 211 `foundation` entries first** — `--primary`, `--background`,
|
|
61
61
|
`--radius`, `--font-size-base` are the handful everything else derives from. The
|
|
62
|
-
|
|
62
|
+
1821 `component` entries are per-part knobs; reach for one only when a role is
|
|
63
63
|
right everywhere except one component.
|
|
64
64
|
5. `anti-ai-tells.json` — 26 shapes that make generated UI look generated, each with the
|
|
65
65
|
fix. Read before you reach for a gradient hero or a wall of coloured chips.
|
|
@@ -145,7 +145,7 @@ has stopped following the brand.
|
|
|
145
145
|
|---|---|---|---|
|
|
146
146
|
| `foundation` | 211 | the seeds — `--primary`, `--background`, `--foreground`, `--radius`, `--font-size-base`, `--shadow-color`. Everything below is derived from these | **yes — this is the main road.** Handed a brand colour, this is where it goes: `:root { --primary: <H> <S>% <L>%; }` (HSL components, no `hsl()` wrapper) |
|
|
147
147
|
| `semantic` | 104 | named roles that follow the seeds — `--ring`, `--text-link`, `--primary-hover`, `--overlay-background` | only when the seed is right and ONE role must differ. That role then stops following a later brand change |
|
|
148
|
-
| `component` |
|
|
148
|
+
| `component` | 1821 | per-part knobs, `--{component}-{part}-{property}` | rarely. Most are declared `initial` with the real default at the call site — deliberate, so a scoped override re-resolves instead of freezing at `:root` |
|
|
149
149
|
|
|
150
150
|
A token whose `value` is `initial` is not empty and not broken: `initial` is the guaranteed-invalid
|
|
151
151
|
value, so the real default is computed where the element paints it. Set it and yours wins.
|
package/agent/index.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"components": 181,
|
|
5
5
|
"patterns": 21,
|
|
6
6
|
"rules": 50,
|
|
7
|
-
"tokens":
|
|
7
|
+
"tokens": 2136,
|
|
8
8
|
"vocabulary": 14
|
|
9
9
|
},
|
|
10
10
|
"files": [
|
|
@@ -48,19 +48,19 @@
|
|
|
48
48
|
"note": "Pin to the tag that matches the @godxjp/ui version you installed. A catalog newer than your package describes props you do not have; older, and it hides props you do.",
|
|
49
49
|
"read": {
|
|
50
50
|
"live": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/index.json",
|
|
51
|
-
"pinned": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/v31.25.
|
|
51
|
+
"pinned": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/v31.25.4/agent/index.json"
|
|
52
52
|
},
|
|
53
53
|
"source": "mcp/src/data — the same data @godxjp/ui-mcp serves — plus the foundation and semantic token tiers, read from src/tokens/*.css",
|
|
54
54
|
"start": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/START-HERE.md",
|
|
55
55
|
"tokenTiers": {
|
|
56
56
|
"component": "per-part knobs, --{component}-{part}-{property}; usually leave these alone",
|
|
57
57
|
"counts": {
|
|
58
|
-
"component":
|
|
58
|
+
"component": 1821,
|
|
59
59
|
"foundation": 211,
|
|
60
60
|
"semantic": 104
|
|
61
61
|
},
|
|
62
62
|
"foundation": "the seeds a consumer is invited to set — --primary, --background, --radius",
|
|
63
63
|
"semantic": "named roles that follow the seeds — --ring, --text-link, --overlay-background"
|
|
64
64
|
},
|
|
65
|
-
"version": "31.25.
|
|
65
|
+
"version": "31.25.4"
|
|
66
66
|
}
|
package/agent/llms.txt
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
# @godxjp/ui
|
|
2
2
|
|
|
3
|
-
> A Japanese-enterprise React design system: 181 components,
|
|
4
|
-
> 50 cardinal rules. This file is the entry point for AI agents. Catalog version 31.25.
|
|
3
|
+
> A Japanese-enterprise React design system: 181 components, 2136 design tokens,
|
|
4
|
+
> 50 cardinal rules. This file is the entry point for AI agents. Catalog version 31.25.4.
|
|
5
5
|
|
|
6
6
|
If your client can run a process, do not read these files — run the MCP server instead
|
|
7
|
-
(`npx @godxjp/ui-mcp@31.25.
|
|
7
|
+
(`npx @godxjp/ui-mcp@31.25.4`). It is searchable and version-locked. These files exist for agents
|
|
8
8
|
that can only fetch URLs.
|
|
9
9
|
|
|
10
10
|
## Start
|
|
@@ -18,7 +18,7 @@ that can only fetch URLs.
|
|
|
18
18
|
- [components-index.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components-index.json): 50 KB — all 181 components as name, group, tagline, plus `absorbed`: the names that do NOT exist and map to it (`Combobox` → `Select`).
|
|
19
19
|
- [components/<Name>.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components/Select.json): one file per component (1 KB–36 KB, median 6 KB). Read the index, then fetch only the ones you chose — this is the selective route, and the reason you do not need the blob.
|
|
20
20
|
- [components.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components.json): 1.2 MB — every entry in one file. Most URL fetchers truncate a response this size without saying so; prefer the per-component files.
|
|
21
|
-
- [tokens.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/tokens.json): every design token with its value, the reason it exists, and its `tier` — 211 `foundation` seeds (`--primary`, `--background`, `--radius`: set these when you are handed a brand), 104 `semantic` roles,
|
|
21
|
+
- [tokens.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/tokens.json): every design token with its value, the reason it exists, and its `tier` — 211 `foundation` seeds (`--primary`, `--background`, `--radius`: set these when you are handed a brand), 104 `semantic` roles, 1821 `component` knobs.
|
|
22
22
|
- [vocabulary.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/vocabulary.json): the controlled prop vocabulary — which prop name means what, across every component.
|
|
23
23
|
- [rules.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/rules.json): 50 cardinal rules.
|
|
24
24
|
- [anti-ai-tells.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/anti-ai-tells.json): 26 shapes that make generated UI look generated, each with its fix.
|
|
@@ -26,7 +26,7 @@ that can only fetch URLs.
|
|
|
26
26
|
## Pinning
|
|
27
27
|
|
|
28
28
|
Every URL above tracks `main`. To pin to the release a project actually installed, swap `main` for
|
|
29
|
-
the tag: `.../godx-jp/godxjp-ui/v31.25.
|
|
29
|
+
the tag: `.../godx-jp/godxjp-ui/v31.25.4/agent/...`. A catalog that does not match the installed
|
|
30
30
|
package describes props that are absent, or hides props that are present, and says nothing either way.
|
|
31
31
|
|
|
32
32
|
Pinned catalogs only exist for releases whose tag actually contains `agent/`. If `…/v<version>/agent/index.json` returns 404, that release predates this catalog: read `…/main/…` instead and compare `index.json` → `version` against the package you have, so you at least know which way it drifted.
|
package/agent/tokens.json
CHANGED
|
@@ -4847,6 +4847,12 @@
|
|
|
4847
4847
|
"tier": "component",
|
|
4848
4848
|
"value": "var(--band-height-xl)"
|
|
4849
4849
|
},
|
|
4850
|
+
{
|
|
4851
|
+
"description": "SearchInput's text stops at the clear ✕'s 44px TARGET, not at its 24px box (gh#1148): edge inset + half the box (where the glyph's centre is) + half the target.",
|
|
4852
|
+
"name": "--search-input-end-padding",
|
|
4853
|
+
"tier": "component",
|
|
4854
|
+
"value": "calc( var(--search-input-edge-inset) + var(--touch-target-min) / 2 + var(--band-height-xl) / 2 )"
|
|
4855
|
+
},
|
|
4850
4856
|
{
|
|
4851
4857
|
"description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.",
|
|
4852
4858
|
"name": "--textarea-padding-block-start",
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$comment": "AUTO-GENERATED by scripts/gen-measurement-contract.mjs — do not edit. Read this instead of guessing: docs/MEASUREMENT-CONTRACT.md.",
|
|
3
|
-
"version": "31.25.
|
|
3
|
+
"version": "31.25.4",
|
|
4
4
|
"targetSize": {
|
|
5
5
|
"standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
|
|
6
6
|
"min": 24,
|
package/dist/styles/control.css
CHANGED
|
@@ -224,10 +224,14 @@
|
|
|
224
224
|
.ui-button.ui-button--bare::after {
|
|
225
225
|
content: "";
|
|
226
226
|
position: absolute;
|
|
227
|
-
inset:
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
227
|
+
inset-block: min(
|
|
228
|
+
0px,
|
|
229
|
+
calc((100% - var(--button-bare-target-size, var(--control-height-xs))) / 2)
|
|
230
|
+
);
|
|
231
|
+
inset-inline: min(
|
|
232
|
+
0px,
|
|
233
|
+
calc((100% - var(--button-bare-target-size, var(--control-height-xs))) / 2)
|
|
234
|
+
);
|
|
231
235
|
}
|
|
232
236
|
|
|
233
237
|
.ui-button--default-size {
|
|
@@ -306,15 +310,13 @@
|
|
|
306
310
|
.ui-segmented-item::after {
|
|
307
311
|
content: "";
|
|
308
312
|
position: absolute;
|
|
309
|
-
inset:
|
|
310
|
-
|
|
311
|
-
min-block-size: var(--control-height-default);
|
|
312
|
-
margin: auto;
|
|
313
|
+
inset-block: min(0px, calc((100% - var(--control-height-default)) / 2));
|
|
314
|
+
inset-inline: min(0px, calc((100% - var(--control-height-default)) / 2));
|
|
313
315
|
}
|
|
314
316
|
|
|
315
317
|
[data-slot="toggle-group-item"].ui-toggle::after,
|
|
316
318
|
.ui-segmented-item::after {
|
|
317
|
-
|
|
319
|
+
inset-inline: 0;
|
|
318
320
|
}
|
|
319
321
|
|
|
320
322
|
.ui-command-item {
|
|
@@ -1065,6 +1067,15 @@
|
|
|
1065
1067
|
color: hsl(var(--foreground));
|
|
1066
1068
|
}
|
|
1067
1069
|
|
|
1070
|
+
@media (pointer: coarse) {
|
|
1071
|
+
.ui-search-input-clear::after {
|
|
1072
|
+
content: "";
|
|
1073
|
+
position: absolute;
|
|
1074
|
+
inset-block: min(0px, calc((100% - var(--control-height-default)) / 2));
|
|
1075
|
+
inset-inline: min(0px, calc((100% - var(--control-height-default)) / 2));
|
|
1076
|
+
}
|
|
1077
|
+
}
|
|
1078
|
+
|
|
1068
1079
|
@keyframes spin {
|
|
1069
1080
|
to {
|
|
1070
1081
|
transform: rotate(360deg);
|
|
@@ -161,13 +161,9 @@
|
|
|
161
161
|
:is(.ui-dialog-close, .ui-sheet-close)::after {
|
|
162
162
|
content: "";
|
|
163
163
|
position: absolute;
|
|
164
|
-
|
|
165
|
-
inset-
|
|
166
|
-
|
|
167
|
-
min-inline-size: var(--dialog-close-size);
|
|
168
|
-
min-block-size: var(--dialog-close-size);
|
|
169
|
-
inline-size: 100%;
|
|
170
|
-
block-size: 100%;
|
|
164
|
+
|
|
165
|
+
inset-block: min(0px, calc((100% - var(--dialog-close-size)) / 2));
|
|
166
|
+
inset-inline: min(0px, calc((100% - var(--dialog-close-size)) / 2));
|
|
171
167
|
}
|
|
172
168
|
|
|
173
169
|
.ui-dialog-close:hover {
|
package/dist/styles/layers.json
CHANGED
|
@@ -796,6 +796,11 @@
|
|
|
796
796
|
}
|
|
797
797
|
|
|
798
798
|
@media (pointer: coarse) {
|
|
799
|
+
|
|
800
|
+
.ui-breadcrumb-list {
|
|
801
|
+
row-gap: max(var(--space-inline-xs), calc(var(--control-height-default) - 1lh));
|
|
802
|
+
}
|
|
803
|
+
|
|
799
804
|
.ui-breadcrumb-item :is(a[href], .ui-breadcrumb-menu-trigger) {
|
|
800
805
|
|
|
801
806
|
position: relative;
|
|
@@ -464,6 +464,10 @@
|
|
|
464
464
|
:root {
|
|
465
465
|
--control-height-compact: var(--band-height-xl);
|
|
466
466
|
--control-height-default: var(--band-height-xl);
|
|
467
|
+
|
|
468
|
+
--search-input-end-padding: calc(
|
|
469
|
+
var(--search-input-edge-inset) + var(--touch-target-min) / 2 + var(--band-height-xl) / 2
|
|
470
|
+
);
|
|
467
471
|
}
|
|
468
472
|
}
|
|
469
473
|
|