From f90bb1f7011a05c324ace956cc5262e43e37ba8b Mon Sep 17 00:00:00 2001 From: lucaronin Date: Tue, 24 Feb 2026 14:47:26 +0100 Subject: [PATCH] fix: use consistent 12px text size for property values in Properties panel Property values (dates, URLs, text) were inheriting the 14px root font size instead of using the 12px size already applied in InfoRow and other inspector sections. Standardize all property value and editing input text to 12px for visual consistency. Co-Authored-By: Claude Opus 4.6 --- design/properties-text-size.pen | 397 ++++++++++++++++++++++ src/components/DynamicPropertiesPanel.tsx | 6 +- src/components/EditableValue.tsx | 4 +- 3 files changed, 402 insertions(+), 5 deletions(-) create mode 100644 design/properties-text-size.pen diff --git a/design/properties-text-size.pen b/design/properties-text-size.pen new file mode 100644 index 00000000..24494f3e --- /dev/null +++ b/design/properties-text-size.pen @@ -0,0 +1,397 @@ +{ + "children": [ + { + "type": "frame", + "id": "ptsFr1", + "x": 0, + "y": 0, + "name": "Properties Panel \u2014 Corrected Text Sizes", + "theme": { "Mode": "Light" }, + "clip": true, + "width": 280, + "height": 460, + "fill": "$--background", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "ptsHdr", + "name": "Inspector Header", + "width": "fill_container", + "height": 45, + "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, + "gap": 8, + "padding": [0, 12], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "ptsHdrL", + "name": "leftGroup", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ptsTtl", + "name": "inspTitle", + "fill": "$--muted-foreground", + "content": "Properties", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "ptsBdy", + "name": "Inspector Body", + "clip": true, + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "gap": 16, + "padding": 12, + "children": [ + { + "type": "frame", + "id": "ptsSec", + "name": "Properties Section", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "frame", + "id": "ptsTyp", + "name": "propType", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ptsTypL", + "name": "propTypeLbl", + "fill": "$--muted-foreground", + "content": "TYPE", + "fontFamily": "IBM Plex Mono", + "fontSize": 10, + "fontWeight": "normal", + "letterSpacing": 0.2 + }, + { + "type": "text", + "id": "ptsTypV", + "name": "propTypeVal \u2014 12px", + "fill": "$--foreground", + "content": "Project", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "ptsSta", + "name": "propStatus", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ptsStaL", + "name": "propStatusLbl", + "fill": "$--muted-foreground", + "content": "STATUS", + "fontFamily": "IBM Plex Mono", + "fontSize": 10, + "fontWeight": "normal", + "letterSpacing": 0.2 + }, + { + "type": "frame", + "id": "ptsStaB", + "name": "propStatusBadge", + "fill": "$--accent-green-light", + "cornerRadius": 16, + "padding": [1, 6], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ptsStaV", + "name": "Badge Text \u2014 10px mono", + "fill": "$--accent-green", + "content": "ACTIVE", + "fontFamily": "IBM Plex Mono", + "fontSize": 10, + "fontWeight": "600", + "letterSpacing": 1.2, + "textAlign": "center" + } + ] + } + ] + }, + { + "type": "frame", + "id": "ptsDat", + "name": "propDate", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ptsDatL", + "name": "propDateLbl", + "fill": "$--muted-foreground", + "content": "DATE", + "fontFamily": "IBM Plex Mono", + "fontSize": 10, + "fontWeight": "normal", + "letterSpacing": 0.2 + }, + { + "type": "text", + "id": "ptsDatV", + "name": "propDateVal \u2014 12px (was 14px)", + "fill": "$--secondary-foreground", + "content": "2025-06-15", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "ptsUrl", + "name": "propURL", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ptsUrlL", + "name": "propURLLbl", + "fill": "$--muted-foreground", + "content": "URL", + "fontFamily": "IBM Plex Mono", + "fontSize": 10, + "fontWeight": "normal", + "letterSpacing": 0.2 + }, + { + "type": "text", + "id": "ptsUrlV", + "name": "propURLVal \u2014 12px truncated", + "fill": "$--secondary-foreground", + "content": "https://example.com/very-long...", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal", + "maxWidth": 160, + "overflow": "ellipsis" + } + ] + }, + { + "type": "frame", + "id": "ptsTxt", + "name": "propText", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ptsTxtL", + "name": "propTextLbl", + "fill": "$--muted-foreground", + "content": "PRIORITY", + "fontFamily": "IBM Plex Mono", + "fontSize": 10, + "fontWeight": "normal", + "letterSpacing": 0.2 + }, + { + "type": "text", + "id": "ptsTxtV", + "name": "propTextVal \u2014 12px (was 14px)", + "fill": "$--secondary-foreground", + "content": "High", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "ptsAdd", + "name": "addPropBtn", + "width": "fill_container", + "cornerRadius": 6, + "stroke": { "align": "inside", "thickness": 1, "fill": "$--border" }, + "padding": [6, 12], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ptsAddT", + "name": "addPropTxt", + "fill": "$--muted-foreground", + "content": "+ Add property", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "ptsInf", + "name": "Info Section", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "stroke": { "align": "inside", "thickness": { "top": 1 }, "fill": "$--border" }, + "padding": [12, 0, 0, 0], + "children": [ + { + "type": "text", + "id": "ptsInfH", + "name": "infoHeading", + "fill": "$--muted-foreground", + "content": "INFO", + "fontFamily": "IBM Plex Mono", + "fontSize": 10, + "fontWeight": "normal", + "letterSpacing": 0.2 + }, + { + "type": "frame", + "id": "ptsInfM", + "name": "infoModified", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "padding": [0, 6], + "children": [ + { + "type": "text", + "id": "ptsInfML", + "name": "infoModLbl", + "fill": "$--muted-foreground", + "content": "MODIFIED", + "fontFamily": "IBM Plex Mono", + "fontSize": 10, + "fontWeight": "normal", + "letterSpacing": 0.2 + }, + { + "type": "text", + "id": "ptsInfMV", + "name": "infoModVal \u2014 12px", + "fill": "$--muted-foreground", + "content": "Feb 24, 2026", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "ptsInfC", + "name": "infoCreated", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "padding": [0, 6], + "children": [ + { + "type": "text", + "id": "ptsInfCL", + "name": "infoCrtLbl", + "fill": "$--muted-foreground", + "content": "CREATED", + "fontFamily": "IBM Plex Mono", + "fontSize": 10, + "fontWeight": "normal", + "letterSpacing": 0.2 + }, + { + "type": "text", + "id": "ptsInfCV", + "name": "infoCrtVal \u2014 12px", + "fill": "$--muted-foreground", + "content": "Jan 10, 2025", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "ptsInfW", + "name": "infoWords", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "padding": [0, 6], + "children": [ + { + "type": "text", + "id": "ptsInfWL", + "name": "infoWrdLbl", + "fill": "$--muted-foreground", + "content": "WORDS", + "fontFamily": "IBM Plex Mono", + "fontSize": 10, + "fontWeight": "normal", + "letterSpacing": 0.2 + }, + { + "type": "text", + "id": "ptsInfWV", + "name": "infoWrdVal \u2014 12px", + "fill": "$--muted-foreground", + "content": "1,247", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + } + ] + } + ] + } + ] + } + ] + } + ], + "variables": { + "--background": { "type": "color", "value": [{ "value": "#FFFFFF" }] }, + "--foreground": { "type": "color", "value": [{ "value": "#37352F" }] }, + "--muted-foreground": { "type": "color", "value": [{ "value": "#6B6B6B" }] }, + "--secondary-foreground": { "type": "color", "value": [{ "value": "#37352F" }] }, + "--border": { "type": "color", "value": [{ "value": "#E9E9E7" }] }, + "--accent-green": { "type": "color", "value": [{ "value": "#0F7B6C" }] }, + "--accent-green-light": { "type": "color", "value": [{ "value": "#DBEDDB" }] } + } +} diff --git a/src/components/DynamicPropertiesPanel.tsx b/src/components/DynamicPropertiesPanel.tsx index 0148cccb..48e4958e 100644 --- a/src/components/DynamicPropertiesPanel.tsx +++ b/src/components/DynamicPropertiesPanel.tsx @@ -85,7 +85,7 @@ function StatusValue({ propKey, value, isEditing, onSave, onStartEdit }: { if (isEditing) { return ( { if (e.key === 'Enter') onSave(propKey, (e.target as HTMLInputElement).value) @@ -128,12 +128,12 @@ function AddPropertyForm({ onAdd, onCancel }: { onAdd: (key: string, value: stri return (
setNewKey(e.target.value)} onKeyDown={handleKeyDown} autoFocus /> setNewValue(e.target.value)} onKeyDown={handleKeyDown} /> diff --git a/src/components/EditableValue.tsx b/src/components/EditableValue.tsx index 076db5bb..c9b85c3d 100644 --- a/src/components/EditableValue.tsx +++ b/src/components/EditableValue.tsx @@ -98,7 +98,7 @@ export function EditableValue({ if (isEditing) { return ( setEditValue(e.target.value)} @@ -111,7 +111,7 @@ export function EditableValue({ return (