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

fix(web): standardize font sizes to style guide scale (#70)

Browse Source
This commit is contained in:
Forbes
2026-02-13 14:33:11 -06:00
parent b53ce94274
commit 679b730e74
25 changed files with 199 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -114,7 +114,7 @@ export function AppShell() {
title={`Switch to ${density === "comfortable" ? "compact" : "comfortable"} view`}
style={{
padding: "0.2rem 0.5rem",
fontSize: "0.7rem",
fontSize: "var(--font-sm)",
borderRadius: "0.3rem",
cursor: "pointer",
border: "1px solid var(--ctp-surface1)",
@@ -130,7 +130,7 @@ export function AppShell() {
onClick={logout}
style={{
padding: "0.35rem 0.75rem",
fontSize: "0.8rem",
fontSize: "var(--font-table)",
borderRadius: "0.4rem",
cursor: "pointer",
border: "none",

2
web/src/components/ContextMenu.tsx
View File

@@ -84,7 +84,7 @@ export function ContextMenu({ x, y, items, onClose }: ContextMenuProps) {
background: "none",
border: "none",
color: item.disabled ? "var(--ctp-overlay0)" : "var(--ctp-text)",
fontSize: "0.85rem",
fontSize: "var(--font-body)",
cursor: item.disabled ? "default" : "pointer",
textAlign: "left",
}}

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

@@ -186,7 +186,7 @@ export function TagInput({
outline: "none",
background: "transparent",
color: "var(--ctp-text)",
fontSize: "0.85rem",
fontSize: "var(--font-body)",
padding: "0.1rem 0",
}}
/>
@@ -220,7 +220,7 @@ export function TagInput({
height: "28px",
display: "flex",
alignItems: "center",
fontSize: "0.8rem",
fontSize: "var(--font-table)",
cursor: "pointer",
color: "var(--ctp-text)",
backgroundColor:

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

@@ -210,7 +210,7 @@ export function AuditDetailPanel({
fontFamily: "'JetBrains Mono', monospace",
color: "var(--ctp-peach)",
fontWeight: 600,
fontSize: "1rem",
fontSize: "var(--font-body)",
}}
>
{audit.part_number}
@@ -263,7 +263,7 @@ export function AuditDetailPanel({
style={{
padding: "0.5rem 1rem",
color: "var(--ctp-red)",
fontSize: "0.8rem",
fontSize: "var(--font-table)",
}}
>
{error}
@@ -274,7 +274,7 @@ export function AuditDetailPanel({
<div
style={{
padding: "0.5rem 1rem",
fontSize: "0.85rem",
fontSize: "var(--font-body)",
color: "var(--ctp-subtext1)",
borderBottom: "1px solid var(--ctp-surface0)",
flexShrink: 0,
@@ -362,7 +362,7 @@ function FieldGroup({
<div
style={{
padding: "0.3rem 1rem",
fontSize: "0.7rem",
fontSize: "var(--font-sm)",
fontWeight: 600,
textTransform: "uppercase",
letterSpacing: "0.05em",
@@ -434,7 +434,7 @@ function FieldRow({
style={{
width: 140,
flexShrink: 0,
fontSize: "0.78rem",
fontSize: "var(--font-table)",
color: "var(--ctp-subtext1)",
}}
title={`Weight: ${field.weight}`}
@@ -445,7 +445,7 @@ function FieldRow({
style={{
marginLeft: 4,
color: "var(--ctp-red)",
fontSize: "0.65rem",
fontSize: "var(--font-xs)",
}}
>
*
@@ -456,7 +456,7 @@ function FieldRow({
<div
style={{
flex: 1,
fontSize: "0.8rem",
fontSize: "var(--font-table)",
color: field.filled ? "var(--ctp-text)" : "var(--ctp-subtext0)",
fontStyle: field.filled ? "normal" : "italic",
}}
@@ -478,7 +478,7 @@ function FieldRow({
style={{
flex: 1,
padding: "0.2rem 0.4rem",
fontSize: "0.8rem",
fontSize: "var(--font-table)",
border: "1px solid var(--ctp-surface1)",
borderRadius: "0.3rem",
backgroundColor: "var(--ctp-surface0)",
@@ -493,7 +493,7 @@ function FieldRow({
const closeBtnStyle: React.CSSProperties = {
padding: "0.2rem 0.5rem",
fontSize: "0.8rem",
fontSize: "var(--font-table)",
border: "none",
borderRadius: "0.3rem",
backgroundColor: "var(--ctp-surface1)",

4
web/src/components/audit/AuditSummaryBar.tsx
View File

@@ -51,7 +51,7 @@ export function AuditSummaryBar({
display: "flex",
alignItems: "center",
justifyContent: "center",
fontSize: "0.7rem",
fontSize: "var(--font-sm)",
fontWeight: 600,
color: "var(--ctp-crust)",
transition: "all 0.15s ease",
@@ -71,7 +71,7 @@ export function AuditSummaryBar({
display: "flex",
gap: "1.5rem",
marginTop: "0.4rem",
fontSize: "0.8rem",
fontSize: "var(--font-table)",
color: "var(--ctp-subtext0)",
}}
>

2
web/src/components/audit/AuditTable.tsx
View File

@@ -55,7 +55,7 @@ export function AuditTable({
style={{
width: "100%",
borderCollapse: "collapse",
fontSize: "0.8rem",
fontSize: "var(--font-table)",
}}
>
<thead>

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

@@ -119,7 +119,7 @@ export function BOMTab({ partNumber, isEditor }: BOMTabProps) {
const inputStyle: React.CSSProperties = {
padding: "0.2rem 0.4rem",
fontSize: "0.8rem",
fontSize: "var(--font-table)",
backgroundColor: "var(--ctp-base)",
border: "1px solid var(--ctp-surface1)",
borderRadius: "0.3rem",
@@ -226,7 +226,9 @@ export function BOMTab({ partNumber, isEditor }: BOMTabProps) {
marginBottom: "0.5rem",
}}
>
<span style={{ fontSize: "0.85rem", color: "var(--ctp-subtext1)" }}>
<span
style={{ fontSize: "var(--font-body)", color: "var(--ctp-subtext1)" }}
>
{entries.length} entries
</span>
<span style={{ flex: 1 }} />
@@ -285,7 +287,7 @@ export function BOMTab({ partNumber, isEditor }: BOMTabProps) {
style={{
width: "100%",
borderCollapse: "collapse",
fontSize: "0.8rem",
fontSize: "var(--font-table)",
}}
>
<thead>
@@ -419,7 +421,7 @@ const thStyle: React.CSSProperties = {
borderBottom: "1px solid var(--ctp-surface1)",
color: "var(--ctp-overlay1)",
fontWeight: 600,
fontSize: "0.7rem",
fontSize: "var(--font-sm)",
textTransform: "uppercase",
letterSpacing: "0.05em",
whiteSpace: "nowrap",
@@ -468,7 +470,7 @@ const saveBtnStyle: React.CSSProperties = {
const sourceBadgeBase: React.CSSProperties = {
padding: "0.1rem 0.4rem",
borderRadius: "1rem",
fontSize: "0.7rem",
fontSize: "var(--font-sm)",
fontWeight: 500,
};

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

@@ -134,7 +134,7 @@ export function CategoryPicker({
style={{
width: "100%",
padding: "0.4rem 0.5rem",
fontSize: "0.8rem",
fontSize: "var(--font-table)",
border: "none",
borderBottom: "1px solid var(--ctp-surface1)",
backgroundColor: "var(--ctp-mantle)",
@@ -152,7 +152,7 @@ export function CategoryPicker({
padding: "0.75rem",
textAlign: "center",
color: "var(--ctp-subtext0)",
fontSize: "0.8rem",
fontSize: "var(--font-table)",
}}
>
Select a domain to see categories
@@ -163,7 +163,7 @@ export function CategoryPicker({
padding: "0.75rem",
textAlign: "center",
color: "var(--ctp-subtext0)",
fontSize: "0.8rem",
fontSize: "var(--font-table)",
}}
>
No categories found
@@ -182,7 +182,7 @@ export function CategoryPicker({
gap: "0.5rem",
padding: "0.3rem 0.5rem",
cursor: "pointer",
fontSize: "0.8rem",
fontSize: "var(--font-table)",
backgroundColor: isSelected
? "rgba(203,166,247,0.12)"
: "transparent",

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

@@ -263,7 +263,7 @@ export function CreateItemPane({ onCreated, onCancel }: CreateItemPaneProps) {
style={{
color: "var(--ctp-green)",
fontWeight: 600,
fontSize: "0.9rem",
fontSize: "var(--font-body)",
}}
>
New Item
@@ -400,13 +400,19 @@ export function CreateItemPane({ onCreated, onCancel }: CreateItemPaneProps) {
/>
) : thumbnailFile?.uploadStatus === "uploading" ? (
<span
style={{ fontSize: "0.8rem", color: "var(--ctp-subtext0)" }}
style={{
fontSize: "var(--font-table)",
color: "var(--ctp-subtext0)",
}}
>
Uploading... {thumbnailFile.uploadProgress}%
</span>
) : (
<span
style={{ fontSize: "0.8rem", color: "var(--ctp-subtext0)" }}
style={{
fontSize: "var(--font-table)",
color: "var(--ctp-subtext0)",
}}
>
Click to upload
</span>
@@ -571,7 +577,7 @@ function SectionHeader({ children }: { children: React.ReactNode }) {
>
<span
style={{
fontSize: "0.7rem",
fontSize: "var(--font-sm)",
fontWeight: 600,
textTransform: "uppercase",
letterSpacing: "0.05em",
@@ -608,7 +614,7 @@ function SidebarSection({
>
<div
style={{
fontSize: "0.7rem",
fontSize: "var(--font-sm)",
fontWeight: 600,
textTransform: "uppercase",
letterSpacing: "0.05em",
@@ -629,7 +635,7 @@ function MetaRow({ label, value }: { label: string; value: string }) {
style={{
display: "flex",
justifyContent: "space-between",
fontSize: "0.8rem",
fontSize: "var(--font-table)",
padding: "0.15rem 0",
}}
>
@@ -699,7 +705,7 @@ const cancelBtnStyle: React.CSSProperties = {
const inputStyle: React.CSSProperties = {
width: "100%",
padding: "0.35rem 0.5rem",
fontSize: "0.85rem",
fontSize: "var(--font-body)",
backgroundColor: "var(--ctp-base)",
border: "1px solid var(--ctp-surface1)",
borderRadius: "0.3rem",
@@ -719,5 +725,5 @@ const errorStyle: React.CSSProperties = {
padding: "0.5rem",
borderRadius: "0.3rem",
marginBottom: "0.5rem",
fontSize: "0.85rem",
fontSize: "var(--font-body)",
};

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

@@ -45,7 +45,7 @@ export function DeleteItemPane({
style={{
color: "var(--ctp-red)",
fontWeight: 600,
fontSize: "0.9rem",
fontSize: "var(--font-body)",
}}
>
Delete Item
@@ -74,7 +74,7 @@ export function DeleteItemPane({
backgroundColor: "rgba(243,139,168,0.1)",
padding: "0.5rem 1rem",
borderRadius: "0.3rem",
fontSize: "0.85rem",
fontSize: "var(--font-body)",
width: "100%",
textAlign: "center",
}}
@@ -86,7 +86,7 @@ export function DeleteItemPane({
<div style={{ textAlign: "center" }}>
<p
style={{
fontSize: "0.9rem",
fontSize: "var(--font-body)",
color: "var(--ctp-text)",
marginBottom: "0.5rem",
}}
@@ -97,7 +97,7 @@ export function DeleteItemPane({
style={{
fontFamily: "'JetBrains Mono', monospace",
color: "var(--ctp-peach)",
fontSize: "1.1rem",
fontSize: "var(--font-title)",
fontWeight: 600,
}}
>
@@ -108,7 +108,7 @@ export function DeleteItemPane({
<p
style={{
color: "var(--ctp-subtext0)",
fontSize: "0.85rem",
fontSize: "var(--font-body)",
textAlign: "center",
maxWidth: 300,
}}

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

@@ -79,7 +79,7 @@ export function EditItemPane({
style={{
color: "var(--ctp-blue)",
fontWeight: 600,
fontSize: "0.9rem",
fontSize: "var(--font-body)",
}}
>
Edit {partNumber}
@@ -116,7 +116,7 @@ export function EditItemPane({
padding: "0.5rem",
borderRadius: "0.3rem",
marginBottom: "0.5rem",
fontSize: "0.85rem",
fontSize: "var(--font-body)",
}}
>
{error}
@@ -209,7 +209,7 @@ function FormGroup({
const inputStyle: React.CSSProperties = {
width: "100%",
padding: "0.35rem 0.5rem",
fontSize: "0.85rem",
fontSize: "var(--font-body)",
backgroundColor: "var(--ctp-base)",
border: "1px solid var(--ctp-surface1)",
borderRadius: "0.3rem",

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

@@ -76,7 +76,9 @@ export function FileDropZone({
transition: "all 0.15s ease",
}}
>
<div style={{ fontSize: "0.85rem", color: "var(--ctp-subtext1)" }}>
<div
style={{ fontSize: "var(--font-body)", color: "var(--ctp-subtext1)" }}
>
Drop files here or{" "}
<span style={{ color: "var(--ctp-mauve)", fontWeight: 600 }}>
browse
@@ -85,7 +87,7 @@ export function FileDropZone({
{accept && (
<div
style={{
fontSize: "0.7rem",
fontSize: "var(--font-sm)",
color: "var(--ctp-overlay0)",
marginTop: "0.25rem",
}}
@@ -157,7 +159,7 @@ function FileRow({
display: "flex",
alignItems: "center",
justifyContent: "center",
fontSize: "0.6rem",
fontSize: "var(--font-xs)",
fontWeight: 700,
color: "var(--ctp-crust)",
flexShrink: 0,
@@ -170,7 +172,7 @@ function FileRow({
<div style={{ flex: 1, minWidth: 0 }}>
<div
style={{
fontSize: "0.8rem",
fontSize: "var(--font-table)",
color: "var(--ctp-text)",
overflow: "hidden",
textOverflow: "ellipsis",
@@ -179,7 +181,9 @@ function FileRow({
>
{attachment.file.name}
</div>
<div style={{ fontSize: "0.7rem", color: "var(--ctp-overlay0)" }}>
<div
style={{ fontSize: "var(--font-sm)", color: "var(--ctp-overlay0)" }}
>
{formatSize(attachment.file.size)}
{attachment.uploadStatus === "error" && (
<span style={{ color: "var(--ctp-red)", marginLeft: "0.5rem" }}>
@@ -215,7 +219,7 @@ function FileRow({
{attachment.uploadStatus === "complete" ? (
<span
style={{
fontSize: "0.7rem",
fontSize: "var(--font-sm)",
color: "var(--ctp-green)",
flexShrink: 0,
}}
@@ -233,7 +237,7 @@ function FileRow({
background: "none",
border: "none",
cursor: "pointer",
fontSize: "0.8rem",
fontSize: "var(--font-table)",
color: hovered ? "var(--ctp-red)" : "var(--ctp-overlay0)",
padding: "0 0.2rem",
flexShrink: 0,

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

@@ -72,7 +72,7 @@ export function ImportItemsPane({
style={{
color: "var(--ctp-yellow)",
fontWeight: 600,
fontSize: "0.9rem",
fontSize: "var(--font-body)",
}}
>
Import Items (CSV)
@@ -92,7 +92,7 @@ export function ImportItemsPane({
padding: "0.5rem",
borderRadius: "0.3rem",
marginBottom: "0.5rem",
fontSize: "0.85rem",
fontSize: "var(--font-body)",
}}
>
{error}
@@ -102,7 +102,7 @@ export function ImportItemsPane({
{/* Instructions */}
<div
style={{
fontSize: "0.8rem",
fontSize: "var(--font-table)",
color: "var(--ctp-subtext0)",
marginBottom: "0.75rem",
}}
@@ -120,7 +120,10 @@ export function ImportItemsPane({
</p>
<a
href="/api/items/template.csv"
style={{ color: "var(--ctp-sapphire)", fontSize: "0.8rem" }}
style={{
color: "var(--ctp-sapphire)",
fontSize: "var(--font-table)",
}}
>
Download CSV template
</a>
@@ -149,7 +152,7 @@ export function ImportItemsPane({
color: "var(--ctp-subtext1)",
cursor: "pointer",
width: "100%",
fontSize: "0.85rem",
fontSize: "var(--font-body)",
}}
>
{file ? file.name : "Choose CSV file..."}
@@ -162,7 +165,7 @@ export function ImportItemsPane({
display: "flex",
alignItems: "center",
gap: "0.4rem",
fontSize: "0.85rem",
fontSize: "var(--font-body)",
color: "var(--ctp-subtext1)",
marginBottom: "0.75rem",
}}
@@ -225,7 +228,7 @@ export function ImportItemsPane({
padding: "0.5rem",
backgroundColor: "var(--ctp-surface0)",
borderRadius: "0.4rem",
fontSize: "0.8rem",
fontSize: "var(--font-table)",
}}
>
<p>

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

@@ -96,7 +96,7 @@ export function ItemDetail({
fontFamily: "'JetBrains Mono', monospace",
color: "var(--ctp-peach)",
fontWeight: 600,
fontSize: "0.9rem",
fontSize: "var(--font-body)",
}}
>
{item.part_number}
@@ -105,7 +105,7 @@ export function ItemDetail({
style={{
padding: "0.1rem 0.5rem",
borderRadius: "1rem",
fontSize: "0.7rem",
fontSize: "var(--font-sm)",
fontWeight: 500,
backgroundColor: tc.bg,
color: tc.color,
@@ -158,7 +158,7 @@ export function ItemDetail({
onClick={() => setActiveTab(tab.key)}
style={{
padding: "0.4rem 0.75rem",
fontSize: "0.8rem",
fontSize: "var(--font-table)",
border: "none",
borderBottom:
activeTab === tab.key
@@ -204,6 +204,6 @@ const headerBtnStyle: React.CSSProperties = {
border: "none",
cursor: "pointer",
color: "var(--ctp-subtext1)",
fontSize: "0.8rem",
fontSize: "var(--font-table)",
padding: "0.2rem 0.4rem",
};

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

@@ -85,7 +85,7 @@ export function MainTab({ item, onReload, isEditor }: MainTabProps) {
display: "flex",
gap: "1rem",
padding: "0.3rem 0",
fontSize: "0.85rem",
fontSize: "var(--font-body)",
}}
>
<span style={{ width: 120, flexShrink: 0, color: "var(--ctp-subtext0)" }}>
@@ -135,7 +135,7 @@ export function MainTab({ item, onReload, isEditor }: MainTabProps) {
padding: "0.5rem",
backgroundColor: "var(--ctp-surface0)",
borderRadius: "0.4rem",
fontSize: "0.85rem",
fontSize: "var(--font-body)",
}}
>
<div
@@ -230,7 +230,7 @@ export function MainTab({ item, onReload, isEditor }: MainTabProps) {
onClick={() => void handleAddProject()}
style={{
padding: "0.1rem 0.4rem",
fontSize: "0.7rem",
fontSize: "var(--font-sm)",
border: "none",
backgroundColor: "var(--ctp-mauve)",
color: "var(--ctp-crust)",
@@ -270,7 +270,7 @@ export function MainTab({ item, onReload, isEditor }: MainTabProps) {
display: "flex",
alignItems: "center",
gap: "0.75rem",
fontSize: "0.85rem",
fontSize: "var(--font-body)",
}}
>
{latestRev.file_size != null && (
@@ -294,7 +294,7 @@ export function MainTab({ item, onReload, isEditor }: MainTabProps) {
}}
style={{
padding: "0.2rem 0.5rem",
fontSize: "0.8rem",
fontSize: "var(--font-table)",
border: "none",
backgroundColor: "var(--ctp-surface1)",
color: "var(--ctp-text)",

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

@@ -126,7 +126,7 @@ export function PropertiesTab({
const inputStyle: React.CSSProperties = {
padding: "0.25rem 0.4rem",
fontSize: "0.8rem",
fontSize: "var(--font-table)",
backgroundColor: "var(--ctp-base)",
border: "1px solid var(--ctp-surface1)",
borderRadius: "0.3rem",
@@ -163,7 +163,7 @@ export function PropertiesTab({
disabled={saving}
style={{
padding: "0.3rem 0.75rem",
fontSize: "0.8rem",
fontSize: "var(--font-table)",
border: "none",
borderRadius: "0.3rem",
backgroundColor: "var(--ctp-mauve)",
@@ -271,7 +271,7 @@ export function PropertiesTab({
minHeight: 200,
padding: "0.5rem",
fontFamily: "'JetBrains Mono', monospace",
fontSize: "0.8rem",
fontSize: "var(--font-table)",
backgroundColor: "var(--ctp-base)",
border: "1px solid var(--ctp-surface1)",
borderRadius: "0.4rem",
@@ -283,7 +283,7 @@ export function PropertiesTab({
<div
style={{
color: "var(--ctp-red)",
fontSize: "0.8rem",
fontSize: "var(--font-table)",
marginTop: "0.25rem",
}}
>
@@ -298,7 +298,7 @@ export function PropertiesTab({
const tabBtn: React.CSSProperties = {
padding: "0.25rem 0.5rem",
fontSize: "0.8rem",
fontSize: "var(--font-table)",
border: "none",
borderRadius: "0.3rem",
backgroundColor: "var(--ctp-surface0)",

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

@@ -98,7 +98,7 @@ export function RevisionsTab({ partNumber, isEditor }: RevisionsTabProps) {
const selectStyle: React.CSSProperties = {
padding: "0.25rem 0.4rem",
fontSize: "0.8rem",
fontSize: "var(--font-table)",
backgroundColor: "var(--ctp-surface0)",
border: "1px solid var(--ctp-surface1)",
borderRadius: "0.3rem",
@@ -145,7 +145,7 @@ export function RevisionsTab({ partNumber, isEditor }: RevisionsTabProps) {
disabled={!compareFrom || !compareTo}
style={{
padding: "0.25rem 0.5rem",
fontSize: "0.8rem",
fontSize: "var(--font-table)",
border: "none",
borderRadius: "0.3rem",
backgroundColor: "var(--ctp-mauve)",
@@ -165,7 +165,7 @@ export function RevisionsTab({ partNumber, isEditor }: RevisionsTabProps) {
padding: "0.5rem",
backgroundColor: "var(--ctp-surface0)",
borderRadius: "0.4rem",
fontSize: "0.8rem",
fontSize: "var(--font-table)",
marginBottom: "0.75rem",
fontFamily: "'JetBrains Mono', monospace",
}}
@@ -215,7 +215,7 @@ export function RevisionsTab({ partNumber, isEditor }: RevisionsTabProps) {
style={{
width: "100%",
borderCollapse: "collapse",
fontSize: "0.8rem",
fontSize: "var(--font-table)",
}}
>
<thead>
@@ -337,7 +337,7 @@ const thStyle: React.CSSProperties = {
borderBottom: "1px solid var(--ctp-surface1)",
color: "var(--ctp-subtext1)",
fontWeight: 600,
fontSize: "0.7rem",
fontSize: "var(--font-sm)",
textTransform: "uppercase",
letterSpacing: "0.05em",
};

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

@@ -1,6 +1,6 @@
import { useState, useEffect } from 'react';
import { get } from '../../api/client';
import type { WhereUsedEntry } from '../../api/types';
import { useState, useEffect } from "react";
import { get } from "../../api/client";
import type { WhereUsedEntry } from "../../api/types";
interface WhereUsedTabProps {
partNumber: string;
@@ -12,20 +12,35 @@ export function WhereUsedTab({ partNumber }: WhereUsedTabProps) {
useEffect(() => {
setLoading(true);
get<WhereUsedEntry[]>(`/api/items/${encodeURIComponent(partNumber)}/bom/where-used`)
get<WhereUsedEntry[]>(
`/api/items/${encodeURIComponent(partNumber)}/bom/where-used`,
)
.then(setEntries)
.catch(() => setEntries([]))
.finally(() => setLoading(false));
}, [partNumber]);
if (loading) return <div style={{ color: 'var(--ctp-subtext0)' }}>Loading where-used...</div>;
if (loading)
return (
<div style={{ color: "var(--ctp-subtext0)" }}>Loading where-used...</div>
);
if (entries.length === 0) {
return <div style={{ color: 'var(--ctp-subtext0)', padding: '1rem' }}>Not used in any assemblies.</div>;
return (
<div style={{ color: "var(--ctp-subtext0)", padding: "1rem" }}>
Not used in any assemblies.
</div>
);
}
return (
<table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.8rem' }}>
<table
style={{
width: "100%",
borderCollapse: "collapse",
fontSize: "var(--font-table)",
}}
>
<thead>
<tr>
<th style={thStyle}>Parent PN</th>
@@ -36,13 +51,25 @@ export function WhereUsedTab({ partNumber }: WhereUsedTabProps) {
</thead>
<tbody>
{entries.map((e, idx) => (
<tr key={e.id} style={{ backgroundColor: idx % 2 === 0 ? 'var(--ctp-base)' : 'var(--ctp-surface0)' }}>
<td style={{ ...tdStyle, fontFamily: "'JetBrains Mono', monospace", color: 'var(--ctp-peach)' }}>
<tr
key={e.id}
style={{
backgroundColor:
idx % 2 === 0 ? "var(--ctp-base)" : "var(--ctp-surface0)",
}}
>
<td
style={{
...tdStyle,
fontFamily: "'JetBrains Mono', monospace",
color: "var(--ctp-peach)",
}}
>
{e.parent_part_number}
</td>
<td style={tdStyle}>{e.parent_description}</td>
<td style={tdStyle}>{e.rel_type}</td>
<td style={tdStyle}>{e.quantity ?? '—'}</td>
<td style={tdStyle}>{e.quantity ?? "—"}</td>
</tr>
))}
</tbody>
@@ -51,10 +78,18 @@ export function WhereUsedTab({ partNumber }: WhereUsedTabProps) {
}
const thStyle: React.CSSProperties = {
padding: '0.3rem 0.5rem', textAlign: 'left', borderBottom: '1px solid var(--ctp-surface1)',
color: 'var(--ctp-subtext1)', fontWeight: 600, fontSize: '0.7rem', textTransform: 'uppercase', letterSpacing: '0.05em',
padding: "0.3rem 0.5rem",
textAlign: "left",
borderBottom: "1px solid var(--ctp-surface1)",
color: "var(--ctp-subtext1)",
fontWeight: 600,
fontSize: "var(--font-sm)",
textTransform: "uppercase",
letterSpacing: "0.05em",
};
const tdStyle: React.CSSProperties = {
padding: '0.25rem 0.5rem', borderBottom: '1px solid var(--ctp-surface0)', whiteSpace: 'nowrap',
padding: "0.25rem 0.5rem",
borderBottom: "1px solid var(--ctp-surface0)",
whiteSpace: "nowrap",
};

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

@@ -57,7 +57,7 @@ export function AuditPage() {
style={{
color: "var(--ctp-red)",
padding: "0.5rem",
fontSize: "0.85rem",
fontSize: "var(--font-body)",
}}
>
Error: {error}

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

@@ -179,7 +179,7 @@ export function ItemsPage() {
style={{
color: "var(--ctp-red)",
padding: "0.5rem",
fontSize: "0.85rem",
fontSize: "var(--font-body)",
}}
>
Error: {error}

10
web/src/pages/LoginPage.tsx
View File

@@ -78,7 +78,7 @@ export function LoginPage() {
style={{
padding: "0 1rem",
color: "var(--ctp-overlay0)",
fontSize: "0.85rem",
fontSize: "var(--font-body)",
}}
>
or
@@ -123,7 +123,7 @@ const titleStyle: React.CSSProperties = {
const subtitleStyle: React.CSSProperties = {
color: "var(--ctp-subtext0)",
textAlign: "center",
fontSize: "0.9rem",
fontSize: "var(--font-body)",
marginBottom: "2rem",
};
@@ -134,7 +134,7 @@ const errorStyle: React.CSSProperties = {
padding: "0.75rem 1rem",
borderRadius: "0.5rem",
marginBottom: "1rem",
fontSize: "0.9rem",
fontSize: "var(--font-body)",
};
const formGroupStyle: React.CSSProperties = {
@@ -146,7 +146,7 @@ const labelStyle: React.CSSProperties = {
marginBottom: "0.5rem",
fontWeight: 500,
color: "var(--ctp-subtext1)",
fontSize: "0.9rem",
fontSize: "var(--font-body)",
};
const inputStyle: React.CSSProperties = {
@@ -156,7 +156,7 @@ const inputStyle: React.CSSProperties = {
border: "1px solid var(--ctp-surface1)",
borderRadius: "0.5rem",
color: "var(--ctp-text)",
fontSize: "1rem",
fontSize: "var(--font-body)",
boxSizing: "border-box",
};

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

@@ -338,7 +338,7 @@ export function ProjectsPage() {
style={{
color: "var(--ctp-red)",
marginTop: "0.5rem",
fontSize: "0.85rem",
fontSize: "var(--font-body)",
}}
>
This action cannot be undone.
@@ -520,7 +520,7 @@ const formHeaderStyle: React.CSSProperties = {
alignItems: "center",
padding: "0.5rem 1rem",
color: "var(--ctp-crust)",
fontSize: "0.9rem",
fontSize: "var(--font-body)",
};
const formCloseStyle: React.CSSProperties = {
@@ -540,7 +540,7 @@ const errorBannerStyle: React.CSSProperties = {
padding: "0.5rem 0.75rem",
borderRadius: "0.4rem",
marginBottom: "0.75rem",
fontSize: "0.85rem",
fontSize: "var(--font-body)",
};
const fieldStyle: React.CSSProperties = {
@@ -552,7 +552,7 @@ const labelStyle: React.CSSProperties = {
marginBottom: "0.35rem",
fontWeight: 500,
color: "var(--ctp-subtext1)",
fontSize: "0.85rem",
fontSize: "var(--font-body)",
};
const inputStyle: React.CSSProperties = {
@@ -562,7 +562,7 @@ const inputStyle: React.CSSProperties = {
border: "1px solid var(--ctp-surface1)",
borderRadius: "0.4rem",
color: "var(--ctp-text)",
fontSize: "0.9rem",
fontSize: "var(--font-body)",
boxSizing: "border-box",
};
@@ -579,7 +579,7 @@ const thStyle: React.CSSProperties = {
borderBottom: "1px solid var(--ctp-surface1)",
color: "var(--ctp-overlay1)",
fontWeight: 600,
fontSize: "0.8rem",
fontSize: "var(--font-table)",
textTransform: "uppercase",
letterSpacing: "0.05em",
cursor: "pointer",
@@ -589,5 +589,5 @@ const thStyle: React.CSSProperties = {
const tdStyle: React.CSSProperties = {
padding: "0.35rem 0.75rem",
borderBottom: "1px solid var(--ctp-surface1)",
fontSize: "0.85rem",
fontSize: "var(--font-body)",
};

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

@@ -385,7 +385,7 @@ function SegmentBlock({
style={{
color: "var(--ctp-subtext0)",
marginBottom: "0.5rem",
fontSize: "0.85rem",
fontSize: "var(--font-body)",
}}
>
{segment.description}
@@ -419,7 +419,9 @@ function SegmentBlock({
return (
<tr key={code}>
<td style={tdStyle}>
<code style={{ fontSize: "0.85rem" }}>{code}</code>
<code style={{ fontSize: "var(--font-body)" }}>
{code}
</code>
</td>
<td style={tdStyle}>
<form
@@ -483,13 +485,15 @@ function SegmentBlock({
style={{ backgroundColor: "rgba(243, 139, 168, 0.1)" }}
>
<td style={tdStyle}>
<code style={{ fontSize: "0.85rem" }}>{code}</code>
<code style={{ fontSize: "var(--font-body)" }}>
{code}
</code>
</td>
<td style={tdStyle}>
<span
style={{
color: "var(--ctp-red)",
fontSize: "0.85rem",
fontSize: "var(--font-body)",
}}
>
Delete this value?
@@ -531,7 +535,9 @@ function SegmentBlock({
return (
<tr key={code}>
<td style={tdStyle}>
<code style={{ fontSize: "0.85rem" }}>{code}</code>
<code style={{ fontSize: "var(--font-body)" }}>
{code}
</code>
</td>
<td style={tdStyle}>{desc}</td>
{isEditor && (
@@ -674,7 +680,7 @@ const codeStyle: React.CSSProperties = {
background: "var(--ctp-surface1)",
padding: "0.25rem 0.5rem",
borderRadius: "0.25rem",
fontSize: "0.85rem",
fontSize: "var(--font-body)",
};
const segmentStyle: React.CSSProperties = {
@@ -706,7 +712,7 @@ const thStyle: React.CSSProperties = {
borderBottom: "1px solid var(--ctp-surface1)",
color: "var(--ctp-overlay1)",
fontWeight: 600,
fontSize: "0.8rem",
fontSize: "var(--font-table)",
textTransform: "uppercase",
letterSpacing: "0.05em",
};
@@ -714,7 +720,7 @@ const thStyle: React.CSSProperties = {
const tdStyle: React.CSSProperties = {
padding: "0.3rem 0.75rem",
borderBottom: "1px solid var(--ctp-surface1)",
fontSize: "0.85rem",
fontSize: "var(--font-body)",
};
const btnTinyStyle: React.CSSProperties = {
@@ -745,7 +751,7 @@ const inlineInputStyle: React.CSSProperties = {
border: "1px solid var(--ctp-surface1)",
borderRadius: "0.25rem",
color: "var(--ctp-text)",
fontSize: "0.85rem",
fontSize: "var(--font-body)",
width: "100%",
boxSizing: "border-box",
};

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

@@ -116,7 +116,7 @@ export function SettingsPage() {
display: "inline-block",
padding: "0.15rem 0.5rem",
borderRadius: "1rem",
fontSize: "0.8rem",
fontSize: "var(--font-table)",
fontWeight: 600,
...roleBadgeStyles[user.role],
}}
@@ -137,7 +137,7 @@ export function SettingsPage() {
style={{
color: "var(--ctp-subtext0)",
marginBottom: "1.25rem",
fontSize: "0.9rem",
fontSize: "var(--font-body)",
}}
>
API tokens allow the FreeCAD plugin and scripts to authenticate with
@@ -175,7 +175,7 @@ export function SettingsPage() {
<p
style={{
color: "var(--ctp-subtext0)",
fontSize: "0.85rem",
fontSize: "var(--font-body)",
marginTop: "0.5rem",
}}
>
@@ -212,7 +212,7 @@ export function SettingsPage() {
{tokensLoading ? (
<p style={mutedStyle}>Loading tokens...</p>
) : tokensError ? (
<p style={{ color: "var(--ctp-red)", fontSize: "0.85rem" }}>
<p style={{ color: "var(--ctp-red)", fontSize: "var(--font-body)" }}>
{tokensError}
</p>
) : (
@@ -332,7 +332,7 @@ const cardStyle: React.CSSProperties = {
const cardTitleStyle: React.CSSProperties = {
marginBottom: "1rem",
fontSize: "1.1rem",
fontSize: "var(--font-title)",
};
const dlStyle: React.CSSProperties = {
@@ -344,12 +344,12 @@ const dlStyle: React.CSSProperties = {
const dtStyle: React.CSSProperties = {
color: "var(--ctp-subtext0)",
fontWeight: 500,
fontSize: "0.9rem",
fontSize: "var(--font-body)",
};
const ddStyle: React.CSSProperties = {
margin: 0,
fontSize: "0.9rem",
fontSize: "var(--font-body)",
};
const mutedStyle: React.CSSProperties = {
@@ -371,7 +371,7 @@ const tokenDisplayStyle: React.CSSProperties = {
border: "1px solid var(--ctp-surface1)",
borderRadius: "0.5rem",
fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
fontSize: "0.85rem",
fontSize: "var(--font-body)",
color: "var(--ctp-peach)",
wordBreak: "break-all",
};
@@ -389,7 +389,7 @@ const labelStyle: React.CSSProperties = {
marginBottom: "0.35rem",
fontWeight: 500,
color: "var(--ctp-subtext1)",
fontSize: "0.85rem",
fontSize: "var(--font-body)",
};
const inputStyle: React.CSSProperties = {
@@ -399,7 +399,7 @@ const inputStyle: React.CSSProperties = {
border: "1px solid var(--ctp-surface1)",
borderRadius: "0.4rem",
color: "var(--ctp-text)",
fontSize: "0.9rem",
fontSize: "var(--font-body)",
boxSizing: "border-box",
};
@@ -472,7 +472,7 @@ const btnTinyStyle: React.CSSProperties = {
const errorStyle: React.CSSProperties = {
color: "var(--ctp-red)",
fontSize: "0.85rem",
fontSize: "var(--font-body)",
marginTop: "0.25rem",
};
@@ -482,7 +482,7 @@ const thStyle: React.CSSProperties = {
borderBottom: "1px solid var(--ctp-surface1)",
color: "var(--ctp-overlay1)",
fontWeight: 600,
fontSize: "0.8rem",
fontSize: "var(--font-table)",
textTransform: "uppercase",
letterSpacing: "0.05em",
};
@@ -490,5 +490,5 @@ const thStyle: React.CSSProperties = {
const tdStyle: React.CSSProperties = {
padding: "0.4rem 0.75rem",
borderBottom: "1px solid var(--ctp-surface1)",
fontSize: "0.85rem",
fontSize: "var(--font-body)",
};

29
web/src/styles/theme.css
View File

@@ -28,6 +28,15 @@
--ctp-crust: #11111b;
}
/* ── Font scale ── */
:root {
--font-title: 1.1rem; /* page titles */
--font-body: 0.8125rem; /* 13px — body text, breadcrumbs */
--font-table: 0.75rem; /* 12px — table cells, inputs, buttons */
--font-sm: 0.6875rem; /* 11px — section headers, labels, captions */
--font-xs: 0.625rem; /* 10px — badges (minimum) */
}
/* ── Density: comfortable (default) ── */
[data-density="comfortable"],
:root {
@@ -39,24 +48,24 @@
--d-nav-px: 0.75rem;
--d-nav-radius: 0.4rem;
--d-user-gap: 0.6rem;
--d-user-font: 0.85rem;
--d-user-font: var(--font-body);
--d-th-py: 0.35rem;
--d-th-px: 0.75rem;
--d-th-font: 0.75rem;
--d-th-font: var(--font-table);
--d-td-py: 0.25rem;
--d-td-px: 0.75rem;
--d-td-font: 0.85rem;
--d-td-font: var(--font-body);
--d-toolbar-gap: 0.5rem;
--d-toolbar-py: 0.5rem;
--d-toolbar-mb: 0.35rem;
--d-input-py: 0.35rem;
--d-input-px: 0.6rem;
--d-input-font: 0.85rem;
--d-input-font: var(--font-body);
--d-footer-h: 28px;
--d-footer-font: 0.75rem;
--d-footer-font: var(--font-table);
--d-footer-px: 2rem;
}
@@ -70,23 +79,23 @@
--d-nav-px: 0.5rem;
--d-nav-radius: 0.3rem;
--d-user-gap: 0.35rem;
--d-user-font: 0.8rem;
--d-user-font: var(--font-table);
--d-th-py: 0.2rem;
--d-th-px: 0.5rem;
--d-th-font: 0.7rem;
--d-th-font: var(--font-sm);
--d-td-py: 0.125rem;
--d-td-px: 0.5rem;
--d-td-font: 0.8rem;
--d-td-font: var(--font-table);
--d-toolbar-gap: 0.35rem;
--d-toolbar-py: 0.25rem;
--d-toolbar-mb: 0.15rem;
--d-input-py: 0.2rem;
--d-input-px: 0.4rem;
--d-input-font: 0.8rem;
--d-input-font: var(--font-table);
--d-footer-h: 24px;
--d-footer-font: 0.7rem;
--d-footer-font: var(--font-sm);
--d-footer-px: 1.25rem;
}