@godxjp/ui 28.8.0 → 28.9.0

package/docs/showcase/case6-agency-handy.tsx

@@ -368,7 +368,7 @@ function TabBar({ active, onChange }: { active: string; onChange: (id: string) =
             onClick={() => onChange(t.id)}
             aria-current={isActive ? "page" : undefined}
             className={
-              "h-full flex-col rounded-none text-[length:var(--font-size-2xs)] font-medium " +
+              "text-[length:var(--font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)))] h-full flex-col rounded-none font-medium " +
               (isActive ? "text-primary" : "text-muted-foreground")
             }
           >
@@ -637,7 +637,7 @@ function InboundTab({
             <ToggleGroupItem
               key={f.id}
               value={f.id}
-              className="h-9 shrink-0 rounded-full text-[length:var(--font-size-xs)] whitespace-nowrap"
+              className="text-[length:var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))] h-9 shrink-0 rounded-full whitespace-nowrap"
               // The library's OWN counter pill, not a `Text` at 70% opacity (gh#643). The
               // hand-rolled one measured 2.15:1 on the selected chip's --primary fill, because
               // `opacity-70` blends whatever ink it inherits back towards the fill underneath it —
@@ -852,19 +852,19 @@ function OutboundTab({ seg, setSeg }: { seg: string; setSeg: (v: string) => void
         <ResponsiveGrid columns={3} gap="xs">
           <ToggleGroupItem
             value="seal"
-            className="h-9 rounded-xl text-[length:var(--font-size-xs)] whitespace-nowrap"
+            className="text-[length:var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))] h-9 rounded-xl whitespace-nowrap"
           >
             Chờ niêm phong
           </ToggleGroupItem>
           <ToggleGroupItem
             value="handoff"
-            className="h-9 rounded-xl text-[length:var(--font-size-xs)] whitespace-nowrap"
+            className="text-[length:var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))] h-9 rounded-xl whitespace-nowrap"
           >
             Chờ bàn giao
           </ToggleGroupItem>
           <ToggleGroupItem
             value="done"
-            className="h-9 rounded-xl text-[length:var(--font-size-xs)] whitespace-nowrap"
+            className="text-[length:var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))] h-9 rounded-xl whitespace-nowrap"
           >
             Đã bàn giao
           </ToggleGroupItem>
@@ -1018,7 +1018,7 @@ export default function AgencyHandyShowcase() {
                 <ToggleGroupItem
                   key={s}
                   value={s}
-                  className="size-7 rounded-md text-[length:var(--font-size-2xs)] uppercase"
+                  className="text-[length:var(--font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)))] size-7 rounded-md uppercase"
                   title={s}
                 >
                   {s[0]}

package/docs/showcase/futurelastic-web.tsx

@@ -55,16 +55,14 @@ const THEME = `
   --font-family-display: "Sora", system-ui, sans-serif;
   --font-family-body: "Be Vietnam Pro", system-ui, "Noto Sans JP", sans-serif;
   --font-family-sans: var(--font-family-body);
-  /* 80px hero. --font-size-display is the display ramp's BASE KNOB, but overriding it HERE does
-     not move the derived steps: --font-size-5xl is declared at :root as var(--font-size-display),
-     so it computes on :root and merely INHERITS down — the freeze docs/TOKENS.md names, and the
-     reason its role-mirror knobs are declared initial. The whole --font-size-* scale is built this way
-     (--font-size-lg freezes on --font-size-base identically), so it is a systemic token-tier
-     defect, not this ramp's, and not gh#826's to fix. Measured, not assumed: with only the line
-     below, <Heading size="5xl"> painted 54px here, the :root value. Setting the STEP works,
-     because this declaration is on an ancestor of the heading. */
+  /* 80px hero, from the display ramp's BASE KNOB alone (gh#834).
+     This used to need a second line — --font-size-5xl: 5rem — and the comment that stood here said
+     why: --font-size-5xl was declared at :root as var(--font-size-display), so it substituted on
+     <html> and this scope merely INHERITED the answer root had given. Heading size="5xl" painted
+     54px with the display knob alone. The step is an initial knob now and the formula sits at the
+     call site, so one line moves the ramp: re-measured here at 80px, with 3xl/4xl following to
+     48.83/62.5px. */
   --font-size-display: 5rem;
-  --font-size-5xl: 5rem;
   /* The glass bar, opted into once (gh#831). acme-website.tsx hand-wrote the identical pair,
      which is why these are framework knobs now and not two literals on .fl-navbar. */
   --topbar-background-alpha: 80%;

package/docs/showcase/marketing-page.tsx

@@ -34,12 +34,13 @@
  * objects because no PROP reaches them. Each one is a named gap, in the order a reader meets them:
  *
  *  1. THE SECTION BAND — `paddingBlock: var(--space-section-band | --space-section-hero)`.
- *     gh#831 minted the tokens and nothing reads them. `Flex pad` / `ResponsiveGrid pad` take a
- *     `GapProp`, whose numeric ladder stops at `12` (`--space-12`, 48px); `--space-20` (80px) and
- *     `--space-24` (96px) are off the end of it, so the marketing rhythm is the one spacing a
- *     layout primitive cannot state. It also has no compact step: `--space-section-hero` measures
- *     96px at 1440 AND at 320, where the package's own landing preset drops its band through
- *     `--centered-shell-landing-main-padding-block-compact`.
+ *     PARTLY CLOSED by gh#839: the numeric `GapProp` ladder now reaches the two band steps, so
+ *     `pad={{ block: 20 }}` (80px) and `pad={{ block: 24 }}` (96px) state the rhythm through the
+ *     public API. The bands below still use an inline `style` because each one ALSO needs the
+ *     centred inner column (`SHELL`), and nothing owns "full-bleed outside, measured column
+ *     inside" — that half of gh#839 is open. Neither step has a compact variant either:
+ *     `--space-section-hero` measures 96px at 1440 and at 320, where the package's own landing
+ *     preset drops its band via `--centered-shell-landing-main-padding-block-compact`.
  *  2. THE CENTRED COLUMN — `marginInline: auto` + `inlineSize: 100%` +
  *     `maxInlineSize: var(--page-measure-wide)` + `paddingInline: var(--space-6)`, repeated at
  *     every band. gh#831 minted `--page-measure-wide` and deliberately did not add
@@ -50,12 +51,11 @@
  *     here (`docs/roadmap/website-components.md` §5.2 proposed `--affix-inset-block-start` and
  *     `--affix-z-index`; neither shipped) and `Topbar` has no `sticky` prop.
  *  4. THE GLASS — `--topbar-background-alpha` / `--topbar-backdrop-blur-size` as inline custom
- *     properties. They are `initial` by design, so a call site MUST set them, and that part is
- *     correct. The blur is the gap: this library has no blur SCALE (no `--blur-*` tier), so the
- *     only sources for a length are a raw literal or another component's private knob
- *     (`--app-launcher-launchpad-backdrop-blur-size`). It reads `--space-2` here, which keeps the
- *     literal count at zero by borrowing a token that means something else. A `--blur-sm|md|lg`
- *     foundation tier would close it properly. Measured result: `blur(8px)`.
+ *     properties. They are `initial` by design, so a call site MUST set them, and that is correct.
+ *     This used to read `--space-2`, borrowing a token that means something else, because the
+ *     library had no blur SCALE at all. gh#837 closed that: `--blur-sm|md|lg` now exists in
+ *     `foundation.css`, deliberately NOT `--scaling`-multiplied, because a backdrop blur is an
+ *     optical effect and compact density does not mean thinner glass. Measured: `blur(8px)`.
  *  5. THE HALO — `position: relative` / `overflow: hidden` on the band and `position: absolute` /
  *     `inset: 0` on the `.ui-brand-glow` layer. This is the package's own idiom (both siblings
  *     write `className="ui-brand-glow absolute inset-0"`), spelled as logical inline style so
@@ -189,7 +189,7 @@ const GLASS_BAR: CSSProperties = {
      package writes for CenteredShell's landing preset, so no page-local media query. */
   "--topbar-inset": "max(var(--space-6), calc((100% - var(--page-measure-wide)) / 2))",
   "--topbar-background-alpha": "85%",
-  "--topbar-backdrop-blur-size": "var(--space-2)",
+  "--topbar-backdrop-blur-size": "var(--blur-md)",
 } as CSSProperties;
 
 /** Per-instance halo shaping — the four `--brand-glow-*` knobs, at the call site. */

package/docs/showcase/table-expandable-rows.tsx

@@ -299,7 +299,10 @@ function DetailPanel({ employee }: { employee: Employee }) {
           {/* Per-day breakdown — quiet nested list, real Card chrome */}
           <Card>
             <CardHeader>
-              <CardTitle level={2} className="text-[length:var(--font-size-xs)]">
+              <CardTitle
+                level={2}
+                className="text-[length:var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))]"
+              >
                 今週の打刻
               </CardTitle>
               <CardAction>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "28.8.0",
-  "godxUiMcp": "28.8.0",
+  "version": "28.9.0",
+  "godxUiMcp": "28.9.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -421,7 +421,8 @@
     "gen:brand": "node scripts/gen-brand.mjs",
     "check:absorbed-names": "node scripts/check-absorbed-names.mjs",
     "check:frame-overflow": "node scripts/check-frame-overflow.mjs",
-    "check:frame-token-wins": "node scripts/check-frame-token-wins.mjs"
+    "check:frame-token-wins": "node scripts/check-frame-token-wins.mjs",
+    "check:frame-token-scope": "node scripts/check-frame-token-scope.mjs"
   },
   "peerDependencies": {
     "@hookform/resolvers": "^5.2.0",