From fe54a855b386e5119d5134867a4924fb977f3495 Mon Sep 17 00:00:00 2001 From: curo1305 Date: Thu, 18 Jun 2026 22:19:25 +0200 Subject: [PATCH] docs(phase-12): fix UI-SPEC typography and spacing blocking issues - Collapse font weights from 3 to 2: drop font-medium (500), use font-semibold (600) for row primary names, labels, column headers; font-normal (400) for body - Fix sm spacing token usage: replace p-1.5 (6px) with p-2 (8px) to match declared 8px value - Update health badge in connection root list from font-medium to font-semibold Co-Authored-By: Claude Sonnet 4.6 --- .../phases/12-cloud-resource-foundation/12-UI-SPEC.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/.planning/phases/12-cloud-resource-foundation/12-UI-SPEC.md b/.planning/phases/12-cloud-resource-foundation/12-UI-SPEC.md index 76f243a..0aaa25c 100644 --- a/.planning/phases/12-cloud-resource-foundation/12-UI-SPEC.md +++ b/.planning/phases/12-cloud-resource-foundation/12-UI-SPEC.md @@ -35,7 +35,7 @@ Declared values (must be multiples of 4): | Token | Value | Usage | |-------|-------|-------| | xs | 4px | Icon gaps, inline badge padding (`gap-1`, `px-1`) | -| sm | 8px | Compact element spacing, toolbar icon buttons (`p-1.5`, `gap-2`) | +| sm | 8px | Compact element spacing, toolbar icon buttons (`p-2`, `gap-2`) | | md | 16px | Default element spacing, row padding (`px-4`) | | lg | 24px | Section padding, horizontal gutters (`px-6`) | | xl | 32px | Layout gaps | @@ -52,11 +52,13 @@ Exceptions: | Role | Size | Weight | Line Height | |------|------|--------|-------------| -| Body | 14px (`text-sm`) | 400 regular | 1.5 | +| Body | 14px (`text-sm`) | 400 regular (`font-normal`) | 1.5 | | Label / metadata | 12px (`text-xs`) | 600 semibold (`font-semibold`) | 1.4 | -| Row primary name | 14px (`text-sm`) | 500 medium (`font-medium`) | 1.5 | +| Row primary name | 14px (`text-sm`) | 600 semibold (`font-semibold`) | 1.5 | | Column header | 12px (`text-xs`) | 600 semibold, `uppercase tracking-wider` | 1.4 | +Two weights only: `font-normal` (400) for body, `font-semibold` (600) for all labels, metadata, column headers, and row primary names. `font-medium` (500) is not used. + Source: extracted from `StorageBrowser.vue` — do not deviate without updating this contract. --- @@ -197,7 +199,7 @@ Connection warning banner (shown when `folderFreshness === 'warning'`): - Displays one row per connected account using the same `StorageBrowser` grid - Provider icon (24px) + connection display name + connection health badge -- Health badge: `text-green-700 bg-green-50 rounded-full text-xs font-medium px-2 py-0.5` for connected; `text-amber-700 bg-amber-50` for warning; `text-red-700 bg-red-50` for failed +- Health badge: `text-green-700 bg-green-50 rounded-full text-xs font-semibold px-2 py-0.5` for connected; `text-amber-700 bg-amber-50` for warning; `text-red-700 bg-red-50` for failed - Clicking a connection root navigates into that connection using connection UUID in the route ### Session-scoped last-visited folder (D-05)