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 (