@godxjp/ui 28.12.0 → 29.0.0

package/dist/tokens/components/tree.css

@@ -8,7 +8,7 @@
 
   --tree-node-padding-inline: var(--space-2);
   --tree-node-gap: var(--space-2);
-  --tree-node-radius: var(--radius-sm);
+  --tree-node-radius: initial;
   --tree-node-font-size: var(--font-size-sm, var(--font-size-base));
 
   --tree-switcher-size: 1.25rem;
@@ -22,7 +22,9 @@
   --tree-divider-color: initial;
 
   --tree-node-hover-background: initial;
+  --tree-node-hover-background-alpha: initial;
   --tree-node-selected-background: initial;
+  --tree-node-selected-background-alpha: initial;
   --tree-node-selected-foreground: initial;
 
   --tree-loading-bar-inline-size: 40%;

package/dist/tokens/components/upload.css

@@ -3,7 +3,7 @@
 :root {
 
   --upload-dropzone-space-inset: var(--space-10);
-  --upload-dropzone-radius: var(--radius-lg);
+  --upload-dropzone-radius: initial;
   --upload-dropzone-border-width: var(--stroke-md);
   --upload-dropzone-icon-size: var(--icon-size-3xl);
   --upload-dropzone-hint-space-block-start: var(--space-3);
@@ -15,7 +15,7 @@
   );
 
   --upload-tile-size: 6rem;
-  --upload-tile-radius: var(--radius-md);
+  --upload-tile-radius: initial;
   --upload-tile-space-gap: var(--space-3);
   --upload-tile-icon-size: var(--icon-size-xl);
   --upload-tile-label-space-block-start: var(--space-1);
@@ -36,7 +36,7 @@
   --upload-remove-icon-size: var(--icon-size-sm);
 
   --upload-picture-max-width: 20rem;
-  --upload-picture-radius: var(--radius-md);
+  --upload-picture-radius: initial;
   --upload-picture-preview-max-height: 12rem;
   --upload-picture-empty-height: 8rem;
 
@@ -45,7 +45,7 @@
   --upload-picture-empty-label-font-size: var(--font-size-sm, var(--font-size-base));
   --upload-picture-overlay-font-size: var(--font-size-sm, var(--font-size-base));
 
-  --upload-picture-badge-radius: var(--radius-md);
+  --upload-picture-badge-radius: initial;
   --upload-picture-badge-offset: var(--space-2);
   --upload-picture-badge-space-inline: var(--space-2);
   --upload-picture-badge-space-block: 0.125rem;
@@ -68,14 +68,14 @@
   --upload-draft-space-inline: var(--space-3);
   --upload-draft-space-block: var(--space-2);
   --upload-draft-space-gap: var(--space-2);
-  --upload-draft-radius: var(--radius-md);
+  --upload-draft-radius: initial;
   --upload-draft-font-size: var(--font-size-sm, var(--font-size-base));
   --upload-draft-icon-size: var(--icon-size-sm);
 
   --upload-row-space-inline: var(--space-3);
   --upload-row-space-block: var(--space-2);
   --upload-row-space-gap: var(--space-3);
-  --upload-row-radius: var(--radius-md);
+  --upload-row-radius: initial;
   --upload-row-font-size: var(--font-size-sm, var(--font-size-base));
   --upload-row-icon-size: var(--icon-size-md);
 

package/dist/tokens/components/welcome.css

@@ -9,7 +9,7 @@
 
   --welcome-padding-block: var(--space-4);
   --welcome-padding-inline: var(--space-4);
-  --welcome-radius: var(--radius-lg);
+  --welcome-radius: initial;
 
   --welcome-icon-size: var(--icon-size-xl);
 

package/dist/tokens/foundation.css

@@ -4,6 +4,13 @@
 
   --background: 60 33% 99%;
   --foreground: 48 8% 13%;
+
+  --card-alpha: 100%;
+  --popover-alpha: 100%;
+  --input-alpha: 100%;
+  --secondary-hover-alpha: 100%;
+  --secondary-active-alpha: 100%;
+
   --card: 60 33% 99%;
   --card-foreground: 48 8% 13%;
   --popover: 60 33% 99%;
@@ -52,6 +59,15 @@
   --mark-destructive: initial;
   --mark-attention: initial;
 
+  --surface-success: initial;
+  --surface-success-alpha: initial;
+  --surface-warning: initial;
+  --surface-warning-alpha: initial;
+  --surface-info: initial;
+  --surface-info-alpha: initial;
+  --surface-destructive: initial;
+  --surface-destructive-alpha: initial;
+
   --secondary-hover: 45 15% 91%;
   --secondary-active: 45 15% 88%;
 
@@ -71,7 +87,7 @@
 
   --chart-1: #0077c7;
   --chart-2: #006e54;
-  --chart-3: #f8b500;
+  --chart-3: #af8000;
   --chart-4: #b7282e;
   --chart-5: #4c6cb3;
   --chart-6: #eb6101;
@@ -138,6 +154,12 @@
   --font-sans-base:
     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui,
     sans-serif;
+
+  --font-sans-ja: initial;
+  --font-sans-ko: initial;
+  --font-sans-vi: initial;
+  --font-sans-zh-hans: initial;
+  --font-sans-zh-hant: initial;
   --font-family-sans: var(--font-sans-base);
   --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
 
@@ -219,6 +241,8 @@
   --blur-md: 8px;
   --blur-lg: 16px;
 
+  --surface-backdrop-saturate: initial;
+
   --band-height-xs: 1.5rem;
   --band-height-sm: 1.75rem;
   --band-height-md: 2rem;
@@ -358,4 +382,7 @@
 
   --secondary-hover: 45 6% 22%;
   --secondary-active: 45 6% 26%;
+
+  --chart-2: #008465;
+  --chart-4: #d43b42;
 }

package/docs/COMPOSITION-VS-COMPONENT.md

@@ -85,6 +85,7 @@ new UI need
 | Dashboard **page layout**                               | ❌  | ❌  | ❌  | ❌  | ➖  | ❌  | ❌  | **Composition** — `AppShell` + `PageContainer` + `ResponsiveGrid`        |
 | "Icon medallion"                                        | ❌  | ❌  | ❌  | ❌  | ✅  | ❌  | ❌  | **Composition** — `Avatar` (square) + a Lucide glyph                     |
 | **Section** / **Band** (full-bleed + measured column)   | ❌  | ❌  | ❌  | ❌  | ✅  | ❌  | ❌  | **Composition** — `<section>` + `Flex measure` + `pad`; see §3.1         |
+| `TenantTheme` (customer hex at runtime)                 | ✅  | ➖  | ❌  | ❌  | ✅  | ❌  | ➖  | **Composition + a published FUNCTION** — `tenantTheme()`; see §3.2       |
 
 `✅ pass · ❌ fail · ➖ borderline`. **StatCard** is the instructive borderline: C2 is weak (it owns little behavior), but it is a universal KPI tile with a controlled API, fully tokenized, broadly reused — so it earns its place. A **Hero** fails six of seven; it is unambiguously a composition.
 
@@ -147,6 +148,36 @@ primitive is missing ONE AXIS before you ask whether a new component is missing.
 fails C1–C7 and a prop that closes the same gap are not the same proposal, and the test above is
 only asking about the first.
 
+### 3.2 `<TenantTheme>` — the case that was answered with a FUNCTION (gh#861, gh#868)
+
+Two consumer repos asked for the same wrapper, in the same words: `<TenantTheme primary={hex}>`,
+so that one region of a page can wear a **customer's** brand colour at runtime. One repo had
+already hand-rolled it and shipped it to production; the other deliberately had not, because
+copying it would have been the third private version of the same thing.
+
+| #                                                    | verdict                                          | why                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| ---------------------------------------------------- | ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **C1** universal                                     | **PASS**                                         | Multi-tenant branding is not one design's block; two unrelated repos hit it independently, and a third (`AppSettingPicker kind="brand"`) already covers the PRESET axis, which is what makes the arbitrary-hex axis missing rather than duplicated.                                                                                                                                                                                                                                                 |
+| **C2** owns reusable behaviour                       | ➖ **borderline, and it is the interesting one** | There IS behaviour that must not be re-derived per consumer — hex → HSL triplet, and the WCAG contrast rule that picks the label. But it is arithmetic, not interaction: no state, no keyboard, no focus, no ARIA, nothing a `<div>` does. C2 asks for behaviour a COMPONENT must own; a pure function owns this better, because it is then callable from a server (Platform already computes its pair at write time), from a `<style>` block with no hydration flash, and from a test with no DOM. |
+| **C3** not expressible from primitives + tokens      | **FAIL**                                         | Once the arithmetic is published, the wrapper is `<div data-tenant={slug} style={tenantTheme(hex).vars}>` — a scoped token override, which §4.3 of this document names as the remedy for a composition. `docs/showcase/theme-customization.tsx` had already recorded the same verdict for the same shape.                                                                                                                                                                                           |
+| **C4** single responsibility + controlled vocabulary | **FAIL**                                         | The requested API is `primary` / `secondary` / `primaryForeground` / `tenant`. There is no `value`/`defaultValue`/`onValueChange`, no `size`, no `tone` — it is a configuration carrier with a screen-shaped API, which is the shape C4 names by name.                                                                                                                                                                                                                                              |
+| **C5** token-themeable, zero baked brand             | **PASS** (vacuously)                             | It IS the theming mechanism; it bakes nothing.                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| **C6** earns the international contract              | **FAIL**                                         | It renders no text, has no role, no keyboard and no ARIA, so there is nothing for `t()` or the APG to say. The accessibility content of this feature is CONTRAST, and that lives in the computation and its tests — not in a component contract.                                                                                                                                                                                                                                                    |
+| **C7** earns its bundle cost                         | ➖                                               | The arithmetic is ~60 lines and every consumer that stores a customer colour needs it. A React wrapper around a `<div>` is not what earns that.                                                                                                                                                                                                                                                                                                                                                     |
+
+**Three hard FAILs. Verdict: composition pattern — plus a published function.** `tenantTheme(hex)`
+in `@godxjp/ui/app` returns the declarations (`--primary`, `--primary-foreground`, `--ring`, and
+the hover / pressed steps), the label it chose, the WCAG 2.2 ratio it achieves and whether that
+clears AA. `hexToHsl` / `contrastRatio` / `relativeLuminance` ship beside it. The `<div>` lives in
+the consumer app; `docs/showcase/tenant-brand-color.tsx` is the worked screen.
+
+**The rule this leaves behind, and it is the twin of §3.1.** §3.1 says: when a composition repeats
+a SHAPE, ask whether a primitive is missing one axis before you ask whether a component is missing.
+This says: when a composition repeats a CALCULATION, ask whether the package is missing a FUNCTION.
+A wrapper component and a published function are not the same proposal, and C1–C7 is only asking
+about the first. The tell is C6 — if there is no text, no role and no keyboard for the
+international contract to apply to, the thing you are holding is probably not a component.
+
 ---
 
 ## 4. How to build a composition pattern correctly