@godxjp/ui 33.9.1 → 33.10.1

package/dist/tokens/components/card.css

@@ -8,7 +8,7 @@
 
   --card-space-header-y: var(--space-stack-sm);
 
-  --card-space-body-y: var(--space-section-active);
+  --card-space-body-y: var(--space-6);
 
   --card-space-solo-y: initial;
 
@@ -17,7 +17,7 @@
   --card-space-divided-y: var(--card-space-header-y);
 
   --card-space-gap: var(--space-stack-xs);
-  --card-title-font-size: var(--font-size-base);
+  --card-title-font-size: calc(var(--font-size-base) * var(--font-size-ratio));
   --card-title-line-height: var(--line-height-tight);
   --card-title-font-weight: var(--font-weight-semibold);
   --card-description-font-size: var(--font-size-sm, var(--font-size-base));
@@ -32,7 +32,7 @@
   --card-header-border-bottom: initial;
   --card-radius: initial;
 
-  --card-shadow: initial;
+  --card-shadow: none;
 
   --card-glow: 0 0 0 0 transparent;
 

package/dist/tokens/components/control.css

@@ -2,7 +2,7 @@
 
 :root {
   --control-height-compact: var(--band-height-sm);
-  --control-height-default: var(--band-height-md);
+  --control-height-default: var(--band-height-lg);
   --control-height-comfortable: var(--band-height-xl);
   --control-padding-x-compact: var(--space-2);
   --control-padding-x-default: var(--space-3);
@@ -22,7 +22,7 @@
   --control-gap-sm: var(--space-inline-xs);
   --control-radius: var(--radius);
 
-  --button-radius: var(--radius-md, calc(var(--radius) / var(--radius-ratio)));
+  --button-radius: var(--radius);
 
   --button-default-background: initial;
   --button-destructive-background: initial;
@@ -37,7 +37,7 @@
 
   --control-font-size: var(--font-size-base);
   --control-border-width: initial;
-  --control-shadow: var(--shadow-xs);
+  --control-shadow: none;
   --control-icon-size: calc(var(--icon-size-md) * var(--scaling));
   --control-icon-size-sm: calc(var(--icon-size-sm) * var(--scaling));
 
@@ -107,7 +107,7 @@
   --toggle-focus-ring-width: initial;
   --toggle-focus-ring-alpha: 1;
 
-  --control-focus-ring-width: initial;
+  --control-focus-ring-width: var(--stroke-md);
 
   --rating-focus-ring-offset: 2px;
 

package/dist/tokens/components/form.css

@@ -8,7 +8,7 @@
 
   --form-label-font-size: var(--control-label-font-size, var(--text-sm));
 
-  --form-block-gap: var(--space-4);
+  --form-block-gap: var(--space-6);
 
   --form-feedback-icon-size: var(--icon-size-sm);
 

package/dist/tokens/components/table.css

@@ -2,7 +2,7 @@
 
 :root {
   --table-row-height-compact: var(--band-height-sm);
-  --table-row-height-default: var(--band-height-md);
+  --table-row-height-default: var(--band-height-lg);
   --table-row-height-comfortable: var(--band-height-xl);
   --table-row-height: calc(var(--table-row-height-default) * var(--scaling));
   --table-cell-padding-y: var(--space-2);

package/dist/tokens/foundation.css

@@ -30,7 +30,7 @@
 
   --border: 30 7% 93%;
 
-  --input: 30 7% 53%;
+  --input: 30 7% 51%;
 
   --success: 146 40% 58%;
   --success-foreground: 48 8% 13%;
@@ -109,9 +109,9 @@
   --shadow-xs: 0 1px 1px 0 rgb(var(--shadow-color) / 0.04);
   --shadow-sm: 0 1px 2px 0 rgb(var(--shadow-color) / 0.05);
   --shadow-md:
-    0 4px 6px -1px rgb(var(--shadow-color) / 0.1), 0 2px 4px -2px rgb(var(--shadow-color) / 0.1);
+    0 6px 16px -4px rgb(var(--shadow-color) / 0.08), 0 1px 3px 0 rgb(var(--shadow-color) / 0.08);
   --shadow-lg:
-    0 10px 15px -3px rgb(var(--shadow-color) / 0.1), 0 4px 6px -4px rgb(var(--shadow-color) / 0.1);
+    0 12px 28px -6px rgb(var(--shadow-color) / 0.1), 0 2px 6px -2px rgb(var(--shadow-color) / 0.08);
   --shadow-xl:
     0 20px 25px -5px rgb(var(--shadow-color) / 0.1), 0 8px 10px -6px rgb(var(--shadow-color) / 0.1);
   --shadow-2xl: 0 25px 50px -12px rgb(var(--shadow-color) / 0.25);
@@ -125,12 +125,12 @@
   --brand-glow: initial;
 
   --focus-outline: 1;
-  --focus-outline-weight: initial;
+  --focus-outline-weight: var(--stroke-md);
 
   --focus-outline-color: initial;
 
   --control-outline-width: calc(var(--stroke-md) * var(--focus-outline));
-  --focus-outline-offset: 0px;
+  --focus-outline-offset: 2px;
 
   --focus-ring-color: initial;
 
@@ -263,9 +263,9 @@
   --phi-p1: calc(var(--phi-unit) * var(--ratio-phi));
   --phi-p2: calc(var(--phi-p1) * var(--ratio-phi));
 
-  --duration-fast: 150ms;
-  --duration-base: 250ms;
-  --duration-slow: 500ms;
+  --duration-fast: 120ms;
+  --duration-base: 180ms;
+  --duration-slow: 320ms;
   --ease-standard: cubic-bezier(0.2, 0, 0, 1);
   --ease-emphasized: cubic-bezier(0.32, 0.72, 0, 1);
   --ease-decelerate: cubic-bezier(0, 0, 0, 1);
@@ -319,8 +319,8 @@
   --table-row-height: var(--table-row-height-default);
   --table-cell-padding-y: var(--space-2);
   --phi-unit: var(--space-4);
-  --space-page-x: var(--space-6);
-  --space-page-y: var(--space-6);
+  --space-page-x: var(--space-8);
+  --space-page-y: var(--space-8);
   --space-section: var(--space-4);
   --space-section-band: var(--space-20);
   --space-section-hero: var(--space-24);
@@ -364,7 +364,7 @@
 
   --border: 45 6% 19%;
 
-  --input: 45 6% 47%;
+  --input: 45 6% 51%;
 
   --success: 146 45% 55%;
   --success-foreground: 48 9% 9%;

package/dist/tokens/semantic/layout.css

@@ -2,8 +2,8 @@
 
 :root {
 
-  --space-page-x: var(--space-6);
-  --space-page-y: var(--space-6);
+  --space-page-x: var(--space-8);
+  --space-page-y: var(--space-8);
   --space-section: var(--space-4);
 
   --space-section-band: var(--space-20);
@@ -46,7 +46,7 @@
   --space-page-compact-y: var(--space-4);
   --space-section-compact: var(--space-4);
 
-  --overlay-background: rgb(0 0 0 / 0.5);
+  --overlay-background: rgb(0 0 0 / 0.4);
 
   --surface-recessed: hsl(var(--muted) / 0.4);
 

package/docs/TOKENS.md

@@ -175,7 +175,7 @@ These two look like synonyms and are not. Keep them apart:
 | `--border` | Decorative chrome — table rules, card edges, section dividers, `<Separator>`                                                                                    | **None.** WCAG 2.2 SC 1.4.11 does not reach a divider; this system's dense JP grid depends on it staying quiet                                         |
 | `--input`  | The boundary that **is** the control — Input, Textarea, Select, outline Button, TagInput, composite date field, topbar search, and the Switch's unchecked track | **≥ 3:1** (SC 1.4.11 Non-text Contrast) against every surface a control sits on — page, card, popover, muted/secondary panel, striped and hovered rows |
 
-A field here has no fill of its own (`background: hsl(var(--background))`) and no shadow to speak of, so that 1px edge is the whole visual claim that you may type there. Current values: `30 7% 53%` light (3.47:1 on `--background`/`--card`, 3.18:1 on `--muted`) and `45 6% 47%` dark (4.22:1 on `--background`, 3.88:1 on `--card`/`--popover`, 3.17:1 on `--muted`).
+A field here has no fill of its own (`background: hsl(var(--background))`) and no shadow to speak of, so that 1px edge is the whole visual claim that you may type there. Current values: `30 7% 51%` light and `45 6% 51%` dark. Both clear 3:1 on background, card, popover, muted and the full accent surface. The earlier 53% / 47% pair passed translucent table hover backgrounds but failed the full accent surface (2.91:1 / 2.69:1).
 
 **Re-theming rule:** a service theme that retints neutrals must move these two **independently** — setting `--input: var(--border)` re-opens the bug. `src/tokens/__tests__/input-boundary-contrast.test.ts` recomputes the ratios from `foundation.css` and fails below 3:1, and fails outright if the two roles are given the same value again.
 
@@ -482,3 +482,64 @@ It is reserved for `@container` / `@media` re-points. Everything static stays in
 ## MCP
 
 `godxjp_ui_guide` topic=`golden-ratio` · `tokens`
+
+## Second pass: hierarchy and rhythm
+
+Fifteen existing token defaults build on the eight first-pass changes. Body stays 14px/1.7, labels and headings stay 500, with no Latin-style negative tracking on Japanese. Mobile gutters remain 16px. Zebra stays off; table numeric alignment and sidebar active styling are unchanged. Card header-to-body spacing grows to 24px; horizontal card/table insets and section gaps stay 16px so fixed-width date columns remain on one line. No new token or component API.
+
+| Token | Previous | New |
+|---|---|---|
+| `--space-page-x` | `var(--space-6)` | `var(--space-8)` |
+| `--space-page-y` | `var(--space-6)` | `var(--space-8)` |
+| `--card-space-body-y` | `var(--space-section-active)` | `var(--space-6)` |
+| `--page-title-font-size` | `var( --heading-h1, calc( var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio) * var(--font-size-ratio) ) )` | `var( --heading-h1, calc( var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio) * var(--font-size-ratio) ) )` |
+| `--page-title-font-size-compact` | `var( --heading-h2, calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio)) )` | `var( --heading-h2, calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio)) )` |
+| `--overlay-background` | `rgb(0 0 0 / 0.5)` | `rgb(0 0 0 / 0.4)` |
+| `--card-title-font-size` | `var(--font-size-base)` | `calc(var(--font-size-base) * var(--font-size-ratio))` |
+| `--card-shadow` | `initial` | `none` |
+| `--form-field-row-gap` | `var(--space-3)` | `var(--space-3)` |
+| `--form-block-gap` | `var(--space-4)` | `var(--space-6)` |
+| `--control-height-default` | `var(--band-height-md)` | `var(--band-height-lg)` |
+| `--control-focus-ring-width` | `initial` | `var(--stroke-md)` |
+| `--table-row-height-default` | `var(--band-height-md)` | `var(--band-height-lg)` |
+| `--focus-outline-weight` | `initial` | `var(--stroke-md)` |
+| `--focus-outline-offset` | `0px` | `2px` |
+
+### Complete restoration (both passes)
+
+Load after library and preset styles. The original input colors restore the original sub-3:1 accent-boundary limitation.
+
+```css
+:root {
+  --space-page-x: var(--space-6);
+  --space-page-y: var(--space-6);
+  --card-space-body-y: var(--space-section-active);
+  --page-title-font-size: var(     --heading-h1,     calc(       var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio) *         var(--font-size-ratio)     )   );
+  --page-title-font-size-compact: var(     --heading-h2,     calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio))   );
+  --overlay-background: rgb(0 0 0 / 0.5);
+  --card-title-font-size: var(--font-size-base);
+  --card-shadow: initial;
+  --form-field-row-gap: var(--space-3);
+  --form-block-gap: var(--space-4);
+  --control-height-default: var(--band-height-md);
+  --control-focus-ring-width: initial;
+  --table-row-height-default: var(--band-height-md);
+  --focus-outline-weight: initial;
+  --focus-outline-offset: 0px;
+  --button-radius: var(--radius-md, calc(var(--radius) / var(--radius-ratio)));
+  --control-shadow: var(--shadow-xs);
+  --shadow-md: 0 4px 6px -1px rgb(var(--shadow-color) / 0.1), 0 2px 4px -2px rgb(var(--shadow-color) / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(var(--shadow-color) / 0.1), 0 4px 6px -4px rgb(var(--shadow-color) / 0.1);
+  --duration-fast: 150ms;
+  --duration-base: 250ms;
+  --duration-slow: 500ms;
+  --input: 30 7% 53%;
+}
+.dark, :root[data-theme="dark"] { --input: 45 6% 47%; }
+
+.ui-scale-fixed {
+  --space-page-x: var(--space-6);
+  --space-page-y: var(--space-6);
+  --space-section: var(--space-4);
+}
+```

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "33.9.1",
-  "godxUiMcp": "33.9.1",
+  "version": "33.10.1",
+  "godxUiMcp": "33.10.1",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",