Merge pull request #43 from refactoringhq/task/properties-text-size
fix: use consistent 12px text size for property values in Properties panel
This commit is contained in:
Luca Rossi
397
design/properties-text-size.pen
Normal file
397
design/properties-text-size.pen
Normal file
@@ -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" }] }
|
||||
}
|
||||
}
|
||||
@@ -85,7 +85,7 @@ function StatusValue({ propKey, value, isEditing, onSave, onStartEdit }: {
|
||||
if (isEditing) {
|
||||
return (
|
||||
<input
|
||||
className="w-full rounded border border-ring bg-muted px-2 py-1 text-[13px] text-foreground outline-none focus:border-primary"
|
||||
className="w-full rounded border border-ring bg-muted px-2 py-1 text-[12px] text-foreground outline-none focus:border-primary"
|
||||
type="text" defaultValue={statusStr}
|
||||
onKeyDown={(e) => {
|
||||
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 (
|
||||
<div className="mt-3 flex flex-col gap-2 rounded-md border border-border bg-muted p-3">
|
||||
<input
|
||||
className="w-full rounded border border-ring bg-muted px-2 py-1 text-[13px] text-foreground outline-none focus:border-primary"
|
||||
className="w-full rounded border border-ring bg-muted px-2 py-1 text-[12px] text-foreground outline-none focus:border-primary"
|
||||
type="text" placeholder="Property name" value={newKey}
|
||||
onChange={(e) => setNewKey(e.target.value)} onKeyDown={handleKeyDown} autoFocus
|
||||
/>
|
||||
<input
|
||||
className="w-full rounded border border-ring bg-muted px-2 py-1 text-[13px] text-foreground outline-none focus:border-primary"
|
||||
className="w-full rounded border border-ring bg-muted px-2 py-1 text-[12px] text-foreground outline-none focus:border-primary"
|
||||
type="text" placeholder="Value" value={newValue}
|
||||
onChange={(e) => setNewValue(e.target.value)} onKeyDown={handleKeyDown}
|
||||
/>
|
||||
|
||||
@@ -98,7 +98,7 @@ export function EditableValue({
|
||||
if (isEditing) {
|
||||
return (
|
||||
<input
|
||||
className="w-full rounded border border-ring bg-muted px-2 py-1 text-[13px] text-foreground outline-none focus:border-primary"
|
||||
className="w-full rounded border border-ring bg-muted px-2 py-1 text-[12px] text-foreground outline-none focus:border-primary"
|
||||
type="text"
|
||||
value={editValue}
|
||||
onChange={(e) => setEditValue(e.target.value)}
|
||||
@@ -111,7 +111,7 @@ export function EditableValue({
|
||||
|
||||
return (
|
||||
<span
|
||||
className="min-w-0 cursor-pointer truncate rounded px-1 py-0.5 text-right text-secondary-foreground transition-colors hover:bg-muted"
|
||||
className="min-w-0 cursor-pointer truncate rounded px-1 py-0.5 text-right text-[12px] text-secondary-foreground transition-colors hover:bg-muted"
|
||||
onClick={onStartEdit}
|
||||
title={value || 'Click to edit'}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user