kindred/silo
1
1
Fork 0
Code Issues 30 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(web): align spacing values to style guide grid (#71)

Browse Source 
- Replace 0.3rem padding/margin/gap with 0.25rem (xs)
- Replace 0.2rem margins with 0.25rem (xs)
- Replace 0.1rem padding with 0.15rem (badge spec)
- Replace 0.6rem margins/padding with 0.5rem (sm)
- Fix borderRadius 0.3rem to 0.375rem (6px per style guide)
- Preserve style-guide-specified values: 0.35rem button gap, 0.4rem cell padding, 0.45rem input padding
This commit is contained in:
Forbes
2026-02-13 14:37:40 -06:00
parent 679b730e74
commit 07c4aa1c28
19 changed files with 74 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/components/AppShell.tsx
View File

@@ -113,9 +113,9 @@ export function AppShell() {
onClick={toggleDensity}
title={`Switch to ${density === "comfortable" ? "compact" : "comfortable"} view`}
style={{
padding: "0.2rem 0.5rem",
padding: "0.25rem 0.5rem",
fontSize: "var(--font-sm)",
borderRadius: "0.3rem",
borderRadius: "0.375rem",
cursor: "pointer",
border: "1px solid var(--ctp-surface1)",
background: "var(--ctp-surface0)",

10
web/src/components/TagInput.tsx
View File

@@ -124,7 +124,7 @@ export function TagInput({
padding: "0.25rem 0.5rem",
backgroundColor: "var(--ctp-base)",
border: "1px solid var(--ctp-surface1)",
borderRadius: "0.3rem",
borderRadius: "0.375rem",
cursor: "text",
minHeight: "1.8rem",
}}
@@ -137,7 +137,7 @@ export function TagInput({
display: "inline-flex",
alignItems: "center",
gap: "0.25rem",
padding: "0.1rem 0.5rem",
padding: "0.15rem 0.5rem",
borderRadius: "1rem",
backgroundColor: "rgba(203,166,247,0.15)",
color: "var(--ctp-mauve)",
@@ -187,7 +187,7 @@ export function TagInput({
background: "transparent",
color: "var(--ctp-text)",
fontSize: "var(--font-body)",
padding: "0.1rem 0",
padding: "0.15rem 0",
}}
/>
</div>
@@ -199,10 +199,10 @@ export function TagInput({
left: 0,
right: 0,
zIndex: 10,
marginTop: "0.2rem",
marginTop: "0.25rem",
backgroundColor: "var(--ctp-surface0)",
border: "1px solid var(--ctp-surface1)",
borderRadius: "0.3rem",
borderRadius: "0.375rem",
maxHeight: "160px",
overflowY: "auto",
}}

12
web/src/components/audit/AuditDetailPanel.tsx
View File

@@ -361,7 +361,7 @@ function FieldGroup({
<div style={{ marginBottom: "0.75rem" }}>
<div
style={{
padding: "0.3rem 1rem",
padding: "0.25rem 1rem",
fontSize: "var(--font-sm)",
fontWeight: 600,
textTransform: "uppercase",
@@ -424,7 +424,7 @@ function FieldRow({
style={{
display: "flex",
alignItems: "center",
padding: "0.3rem 1rem",
padding: "0.25rem 1rem",
borderLeft: `3px solid ${borderColor}`,
marginLeft: "0.5rem",
gap: "0.5rem",
@@ -477,10 +477,10 @@ function FieldRow({
placeholder="---"
style={{
flex: 1,
padding: "0.2rem 0.4rem",
padding: "0.25rem 0.4rem",
fontSize: "var(--font-table)",
border: "1px solid var(--ctp-surface1)",
borderRadius: "0.3rem",
borderRadius: "0.375rem",
backgroundColor: "var(--ctp-surface0)",
color: "var(--ctp-text)",
outline: "none",
@@ -492,10 +492,10 @@ function FieldRow({
}
const closeBtnStyle: React.CSSProperties = {
padding: "0.2rem 0.5rem",
padding: "0.25rem 0.5rem",
fontSize: "var(--font-table)",
border: "none",
borderRadius: "0.3rem",
borderRadius: "0.375rem",
backgroundColor: "var(--ctp-surface1)",
color: "var(--ctp-subtext1)",
cursor: "pointer",

18
web/src/components/items/BOMTab.tsx
View File

@@ -118,11 +118,11 @@ export function BOMTab({ partNumber, isEditor }: BOMTabProps) {
};
const inputStyle: React.CSSProperties = {
padding: "0.2rem 0.4rem",
padding: "0.25rem 0.4rem",
fontSize: "var(--font-table)",
backgroundColor: "var(--ctp-base)",
border: "1px solid var(--ctp-surface1)",
borderRadius: "0.3rem",
borderRadius: "0.375rem",
color: "var(--ctp-text)",
width: "100%",
};
@@ -267,9 +267,9 @@ export function BOMTab({ partNumber, isEditor }: BOMTabProps) {
{isEditor && assemblyCount > 0 && (
<div
style={{
padding: "0.35rem 0.6rem",
padding: "0.35rem 0.5rem",
marginBottom: "0.5rem",
borderRadius: "0.3rem",
borderRadius: "0.375rem",
backgroundColor: "rgba(148,226,213,0.1)",
border: "1px solid rgba(148,226,213,0.3)",
fontSize: "0.75rem",
@@ -416,7 +416,7 @@ export function BOMTab({ partNumber, isEditor }: BOMTabProps) {
}
const thStyle: React.CSSProperties = {
padding: "0.3rem 0.5rem",
padding: "0.25rem 0.5rem",
textAlign: "left",
borderBottom: "1px solid var(--ctp-surface1)",
color: "var(--ctp-overlay1)",
@@ -451,12 +451,12 @@ const actionBtnStyle: React.CSSProperties = {
cursor: "pointer",
fontSize: "0.75rem",
fontWeight: 500,
padding: "0.1rem 0.3rem",
padding: "0.15rem 0.25rem",
borderRadius: "0.375rem",
};
const saveBtnStyle: React.CSSProperties = {
padding: "0.2rem 0.4rem",
padding: "0.25rem 0.4rem",
fontSize: "0.75rem",
fontWeight: 500,
border: "none",
@@ -468,7 +468,7 @@ const saveBtnStyle: React.CSSProperties = {
};
const sourceBadgeBase: React.CSSProperties = {
padding: "0.1rem 0.4rem",
padding: "0.15rem 0.4rem",
borderRadius: "1rem",
fontSize: "var(--font-sm)",
fontWeight: 500,
@@ -487,7 +487,7 @@ const manualBadge: React.CSSProperties = {
};
const cancelBtnStyle: React.CSSProperties = {
padding: "0.2rem 0.4rem",
padding: "0.25rem 0.4rem",
fontSize: "0.75rem",
fontWeight: 500,
border: "none",

6
web/src/components/items/CategoryPicker.tsx
View File

@@ -95,7 +95,7 @@ export function CategoryPicker({
}
}}
style={{
padding: "0.2rem 0.5rem",
padding: "0.25rem 0.5rem",
fontSize: "0.75rem",
fontWeight: 500,
border: "none",
@@ -180,7 +180,7 @@ export function CategoryPicker({
display: "flex",
alignItems: "center",
gap: "0.5rem",
padding: "0.3rem 0.5rem",
padding: "0.25rem 0.5rem",
cursor: "pointer",
fontSize: "var(--font-table)",
backgroundColor: isSelected
@@ -228,7 +228,7 @@ export function CategoryPicker({
{value && categories[value] && (
<div
style={{
padding: "0.3rem 0.5rem",
padding: "0.25rem 0.5rem",
fontSize: "0.75rem",
color: "var(--ctp-subtext0)",
borderTop: "1px solid var(--ctp-surface0)",

12
web/src/components/items/CreateItemPane.tsx
View File

@@ -653,13 +653,13 @@ function FormGroup({
children: React.ReactNode;
}) {
return (
<div style={{ marginBottom: "0.6rem" }}>
<div style={{ marginBottom: "0.5rem" }}>
<label
style={{
display: "block",
fontSize: "0.75rem",
color: "var(--ctp-subtext0)",
marginBottom: "0.2rem",
marginBottom: "0.25rem",
}}
>
{label}
@@ -682,7 +682,7 @@ const headerStyle: React.CSSProperties = {
};
const actionBtnStyle: React.CSSProperties = {
padding: "0.3rem 0.75rem",
padding: "0.25rem 0.75rem",
fontSize: "0.75rem",
fontWeight: 500,
border: "none",
@@ -698,7 +698,7 @@ const cancelBtnStyle: React.CSSProperties = {
color: "var(--ctp-subtext1)",
fontSize: "0.75rem",
fontWeight: 500,
padding: "0.2rem 0.4rem",
padding: "0.25rem 0.4rem",
borderRadius: "0.375rem",
};
@@ -708,7 +708,7 @@ const inputStyle: React.CSSProperties = {
fontSize: "var(--font-body)",
backgroundColor: "var(--ctp-base)",
border: "1px solid var(--ctp-surface1)",
borderRadius: "0.3rem",
borderRadius: "0.375rem",
color: "var(--ctp-text)",
boxSizing: "border-box",
};
@@ -723,7 +723,7 @@ const errorStyle: React.CSSProperties = {
color: "var(--ctp-red)",
backgroundColor: "rgba(243,139,168,0.1)",
padding: "0.5rem",
borderRadius: "0.3rem",
borderRadius: "0.375rem",
marginBottom: "0.5rem",
fontSize: "var(--font-body)",
};

4
web/src/components/items/DeleteItemPane.tsx
View File

@@ -73,7 +73,7 @@ export function DeleteItemPane({
color: "var(--ctp-red)",
backgroundColor: "rgba(243,139,168,0.1)",
padding: "0.5rem 1rem",
borderRadius: "0.3rem",
borderRadius: "0.375rem",
fontSize: "var(--font-body)",
width: "100%",
textAlign: "center",
@@ -163,6 +163,6 @@ const headerBtnStyle: React.CSSProperties = {
color: "var(--ctp-subtext1)",
fontSize: "0.75rem",
fontWeight: 500,
padding: "0.2rem 0.4rem",
padding: "0.25rem 0.4rem",
borderRadius: "0.375rem",
};

12
web/src/components/items/EditItemPane.tsx
View File

@@ -89,7 +89,7 @@ export function EditItemPane({
onClick={() => void handleSave()}
disabled={saving}
style={{
padding: "0.3rem 0.75rem",
padding: "0.25rem 0.75rem",
fontSize: "0.75rem",
fontWeight: 500,
border: "none",
@@ -114,7 +114,7 @@ export function EditItemPane({
color: "var(--ctp-red)",
backgroundColor: "rgba(243,139,168,0.1)",
padding: "0.5rem",
borderRadius: "0.3rem",
borderRadius: "0.375rem",
marginBottom: "0.5rem",
fontSize: "var(--font-body)",
}}
@@ -190,13 +190,13 @@ function FormGroup({
children: React.ReactNode;
}) {
return (
<div style={{ marginBottom: "0.6rem" }}>
<div style={{ marginBottom: "0.5rem" }}>
<label
style={{
display: "block",
fontSize: "0.75rem",
color: "var(--ctp-subtext0)",
marginBottom: "0.2rem",
marginBottom: "0.25rem",
}}
>
{label}
@@ -212,7 +212,7 @@ const inputStyle: React.CSSProperties = {
fontSize: "var(--font-body)",
backgroundColor: "var(--ctp-base)",
border: "1px solid var(--ctp-surface1)",
borderRadius: "0.3rem",
borderRadius: "0.375rem",
color: "var(--ctp-text)",
};
@@ -223,6 +223,6 @@ const headerBtnStyle: React.CSSProperties = {
color: "var(--ctp-subtext1)",
fontSize: "0.75rem",
fontWeight: 500,
padding: "0.2rem 0.4rem",
padding: "0.25rem 0.4rem",
borderRadius: "0.375rem",
};

6
web/src/components/items/FileDropZone.tsx
View File

@@ -143,8 +143,8 @@ function FileRow({
display: "flex",
alignItems: "center",
gap: "0.5rem",
padding: "0.3rem 0.4rem",
borderRadius: "0.3rem",
padding: "0.25rem 0.4rem",
borderRadius: "0.375rem",
position: "relative",
}}
>
@@ -153,7 +153,7 @@ function FileRow({
style={{
width: 28,
height: 28,
borderRadius: "0.3rem",
borderRadius: "0.375rem",
backgroundColor: color,
opacity: 0.8,
display: "flex",

6
web/src/components/items/ImportItemsPane.tsx
View File

@@ -90,7 +90,7 @@ export function ImportItemsPane({
color: "var(--ctp-red)",
backgroundColor: "rgba(243,139,168,0.1)",
padding: "0.5rem",
borderRadius: "0.3rem",
borderRadius: "0.375rem",
marginBottom: "0.5rem",
fontSize: "var(--font-body)",
}}
@@ -262,7 +262,7 @@ export function ImportItemsPane({
style={{
color: "var(--ctp-red)",
fontSize: "0.75rem",
padding: "0.1rem 0",
padding: "0.15rem 0",
}}
>
Row {err.row}
@@ -296,6 +296,6 @@ const headerBtnStyle: React.CSSProperties = {
color: "var(--ctp-subtext1)",
fontSize: "0.75rem",
fontWeight: 500,
padding: "0.2rem 0.4rem",
padding: "0.25rem 0.4rem",
borderRadius: "0.375rem",
};

4
web/src/components/items/ItemDetail.tsx
View File

@@ -103,7 +103,7 @@ export function ItemDetail({
</span>
<span
style={{
padding: "0.1rem 0.5rem",
padding: "0.15rem 0.5rem",
borderRadius: "1rem",
fontSize: "var(--font-sm)",
fontWeight: 500,
@@ -205,5 +205,5 @@ const headerBtnStyle: React.CSSProperties = {
cursor: "pointer",
color: "var(--ctp-subtext1)",
fontSize: "var(--font-table)",
padding: "0.2rem 0.4rem",
padding: "0.25rem 0.4rem",
};

2
web/src/components/items/ItemTable.tsx
View File

@@ -268,7 +268,7 @@ export function ItemTable({
<td key={col.key} style={tdStyle}>
<span
style={{
padding: "0.1rem 0.5rem",
padding: "0.15rem 0.5rem",
borderRadius: "1rem",
fontSize: "0.75rem",
fontWeight: 500,

16
web/src/components/items/MainTab.tsx
View File

@@ -84,7 +84,7 @@ export function MainTab({ item, onReload, isEditor }: MainTabProps) {
style={{
display: "flex",
gap: "1rem",
padding: "0.3rem 0",
padding: "0.25rem 0",
fontSize: "var(--font-body)",
}}
>
@@ -177,7 +177,7 @@ export function MainTab({ item, onReload, isEditor }: MainTabProps) {
display: "inline-flex",
alignItems: "center",
gap: "0.25rem",
padding: "0.1rem 0.5rem",
padding: "0.15rem 0.5rem",
borderRadius: "1rem",
backgroundColor: "rgba(203,166,247,0.15)",
color: "var(--ctp-mauve)",
@@ -208,11 +208,11 @@ export function MainTab({ item, onReload, isEditor }: MainTabProps) {
value={addProject}
onChange={(e) => setAddProject(e.target.value)}
style={{
padding: "0.1rem 0.3rem",
padding: "0.15rem 0.25rem",
fontSize: "0.75rem",
backgroundColor: "var(--ctp-surface0)",
border: "1px solid var(--ctp-surface1)",
borderRadius: "0.3rem",
borderRadius: "0.375rem",
color: "var(--ctp-text)",
}}
>
@@ -229,12 +229,12 @@ export function MainTab({ item, onReload, isEditor }: MainTabProps) {
<button
onClick={() => void handleAddProject()}
style={{
padding: "0.1rem 0.4rem",
padding: "0.15rem 0.4rem",
fontSize: "var(--font-sm)",
border: "none",
backgroundColor: "var(--ctp-mauve)",
color: "var(--ctp-crust)",
borderRadius: "0.3rem",
borderRadius: "0.375rem",
cursor: "pointer",
}}
>
@@ -293,12 +293,12 @@ export function MainTab({ item, onReload, isEditor }: MainTabProps) {
window.location.href = `/api/items/${encodeURIComponent(item.part_number)}/file/${latestRev.revision_number}`;
}}
style={{
padding: "0.2rem 0.5rem",
padding: "0.25rem 0.5rem",
fontSize: "var(--font-table)",
border: "none",
backgroundColor: "var(--ctp-surface1)",
color: "var(--ctp-text)",
borderRadius: "0.3rem",
borderRadius: "0.375rem",
cursor: "pointer",
}}
>

10
web/src/components/items/PropertiesTab.tsx
View File

@@ -129,7 +129,7 @@ export function PropertiesTab({
fontSize: "var(--font-table)",
backgroundColor: "var(--ctp-base)",
border: "1px solid var(--ctp-surface1)",
borderRadius: "0.3rem",
borderRadius: "0.375rem",
color: "var(--ctp-text)",
};
@@ -162,10 +162,10 @@ export function PropertiesTab({
onClick={() => void handleSave()}
disabled={saving}
style={{
padding: "0.3rem 0.75rem",
padding: "0.25rem 0.75rem",
fontSize: "var(--font-table)",
border: "none",
borderRadius: "0.3rem",
borderRadius: "0.375rem",
backgroundColor: "var(--ctp-mauve)",
color: "var(--ctp-crust)",
cursor: "pointer",
@@ -184,7 +184,7 @@ export function PropertiesTab({
key={idx}
style={{
display: "flex",
gap: "0.3rem",
gap: "0.25rem",
marginBottom: "0.25rem",
alignItems: "center",
}}
@@ -300,7 +300,7 @@ const tabBtn: React.CSSProperties = {
padding: "0.25rem 0.5rem",
fontSize: "var(--font-table)",
border: "none",
borderRadius: "0.3rem",
borderRadius: "0.375rem",
backgroundColor: "var(--ctp-surface0)",
color: "var(--ctp-subtext1)",
cursor: "pointer",

10
web/src/components/items/RevisionsTab.tsx
View File

@@ -101,7 +101,7 @@ export function RevisionsTab({ partNumber, isEditor }: RevisionsTabProps) {
fontSize: "var(--font-table)",
backgroundColor: "var(--ctp-surface0)",
border: "1px solid var(--ctp-surface1)",
borderRadius: "0.3rem",
borderRadius: "0.375rem",
color: "var(--ctp-text)",
};
@@ -147,7 +147,7 @@ export function RevisionsTab({ partNumber, isEditor }: RevisionsTabProps) {
padding: "0.25rem 0.5rem",
fontSize: "var(--font-table)",
border: "none",
borderRadius: "0.3rem",
borderRadius: "0.375rem",
backgroundColor: "var(--ctp-mauve)",
color: "var(--ctp-crust)",
cursor: "pointer",
@@ -250,10 +250,10 @@ export function RevisionsTab({ partNumber, isEditor }: RevisionsTabProps) {
)
}
style={{
padding: "0.1rem 0.3rem",
padding: "0.15rem 0.25rem",
fontSize: "0.75rem",
border: "none",
borderRadius: "0.3rem",
borderRadius: "0.375rem",
backgroundColor: "transparent",
color: statusColors[rev.status] ?? "var(--ctp-text)",
cursor: "pointer",
@@ -332,7 +332,7 @@ export function RevisionsTab({ partNumber, isEditor }: RevisionsTabProps) {
}
const thStyle: React.CSSProperties = {
padding: "0.3rem 0.5rem",
padding: "0.25rem 0.5rem",
textAlign: "left",
borderBottom: "1px solid var(--ctp-surface1)",
color: "var(--ctp-subtext1)",

2
web/src/components/items/WhereUsedTab.tsx
View File

@@ -78,7 +78,7 @@ export function WhereUsedTab({ partNumber }: WhereUsedTabProps) {
}
const thStyle: React.CSSProperties = {
padding: "0.3rem 0.5rem",
padding: "0.25rem 0.5rem",
textAlign: "left",
borderBottom: "1px solid var(--ctp-surface1)",
color: "var(--ctp-subtext1)",

2
web/src/pages/ProjectsPage.tsx
View File

@@ -497,7 +497,7 @@ const btnDangerStyle: React.CSSProperties = {
};
const btnSmallStyle: React.CSSProperties = {
padding: "0.3rem 0.6rem",
padding: "0.25rem 0.5rem",
borderRadius: "0.375rem",
border: "none",
backgroundColor: "var(--ctp-surface1)",

6
web/src/pages/SchemasPage.tsx
View File

@@ -718,13 +718,13 @@ const thStyle: React.CSSProperties = {
};
const tdStyle: React.CSSProperties = {
padding: "0.3rem 0.75rem",
padding: "0.25rem 0.75rem",
borderBottom: "1px solid var(--ctp-surface1)",
fontSize: "var(--font-body)",
};
const btnTinyStyle: React.CSSProperties = {
padding: "0.2rem 0.5rem",
padding: "0.25rem 0.5rem",
borderRadius: "0.375rem",
border: "none",
backgroundColor: "var(--ctp-surface1)",
@@ -735,7 +735,7 @@ const btnTinyStyle: React.CSSProperties = {
};
const btnTinyPrimaryStyle: React.CSSProperties = {
padding: "0.2rem 0.5rem",
padding: "0.25rem 0.5rem",
borderRadius: "0.375rem",
border: "none",
backgroundColor: "var(--ctp-mauve)",

6
web/src/pages/SettingsPage.tsx
View File

@@ -441,7 +441,7 @@ const btnDangerStyle: React.CSSProperties = {
background: "rgba(243, 139, 168, 0.15)",
color: "var(--ctp-red)",
border: "none",
padding: "0.3rem 0.6rem",
padding: "0.25rem 0.5rem",
borderRadius: "0.375rem",
cursor: "pointer",
fontSize: "0.75rem",
@@ -452,7 +452,7 @@ const btnRevokeConfirmStyle: React.CSSProperties = {
background: "var(--ctp-red)",
color: "var(--ctp-crust)",
border: "none",
padding: "0.2rem 0.5rem",
padding: "0.25rem 0.5rem",
borderRadius: "0.375rem",
cursor: "pointer",
fontSize: "0.75rem",
@@ -460,7 +460,7 @@ const btnRevokeConfirmStyle: React.CSSProperties = {
};
const btnTinyStyle: React.CSSProperties = {
padding: "0.2rem 0.5rem",
padding: "0.25rem 0.5rem",
borderRadius: "0.375rem",
border: "none",
backgroundColor: "var(--ctp-surface1)",