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

main #111

Merged
forbes merged 53 commits from main into production 2026-02-15 14:37:31 +00:00
Conversation 0 Commits 53 Files Changed 90 +186 -172
25 changed files with 186 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit ba92dd363c - Show all commits

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

@@ -100,7 +100,7 @@ export function AppShell() {
<span
style={{
display: "inline-block",
padding: "0.15rem 0.5rem",
padding: "0.25rem 0.5rem",
borderRadius: "1rem",
fontSize: "0.75rem",
fontWeight: 600,
@@ -115,7 +115,7 @@ export function AppShell() {
style={{
padding: "0.25rem 0.5rem",
fontSize: "var(--font-sm)",
borderRadius: "0.375rem",
borderRadius: "0.25rem",
cursor: "pointer",
border: "1px solid var(--ctp-surface1)",
background: "var(--ctp-surface0)",
@@ -129,9 +129,9 @@ export function AppShell() {
<button
onClick={logout}
style={{
padding: "0.35rem 0.75rem",
padding: "0.25rem 0.75rem",
fontSize: "var(--font-table)",
borderRadius: "0.4rem",
borderRadius: "0.5rem",
cursor: "pointer",
border: "none",
background: "var(--ctp-surface1)",

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

@@ -80,7 +80,7 @@ export function ContextMenu({ x, y, items, onClose }: ContextMenuProps) {
alignItems: "center",
gap: "0.5rem",
width: "100%",
padding: "0.35rem 0.75rem",
padding: "0.25rem 0.75rem",
background: "none",
border: "none",
color: item.disabled ? "var(--ctp-overlay0)" : "var(--ctp-text)",

68
web/src/components/PageFooter.tsx
View File

@@ -1,4 +1,4 @@
import type { ReactNode } from 'react';
import type { ReactNode } from "react";
interface PageFooterProps {
stats?: ReactNode;
@@ -8,32 +8,40 @@ interface PageFooterProps {
onPageChange?: (page: number) => void;
}
export function PageFooter({ stats, page, pageSize, itemCount, onPageChange }: PageFooterProps) {
export function PageFooter({
stats,
page,
pageSize,
itemCount,
onPageChange,
}: PageFooterProps) {
const hasPagination = page !== undefined && onPageChange !== undefined;
return (
<div style={{
position: 'fixed',
bottom: 0,
left: 0,
right: 0,
height: 'var(--d-footer-h)',
backgroundColor: 'var(--ctp-surface0)',
borderTop: '1px solid var(--ctp-surface1)',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
padding: '0 var(--d-footer-px)',
fontSize: 'var(--d-footer-font)',
color: 'var(--ctp-subtext0)',
zIndex: 100,
}}>
<div style={{ display: 'flex', gap: '1.5rem', alignItems: 'center' }}>
<div
style={{
position: "fixed",
bottom: 0,
left: 0,
right: 0,
height: "var(--d-footer-h)",
backgroundColor: "var(--ctp-surface0)",
borderTop: "1px solid var(--ctp-surface1)",
display: "flex",
alignItems: "center",
justifyContent: "space-between",
padding: "0 var(--d-footer-px)",
fontSize: "var(--d-footer-font)",
color: "var(--ctp-subtext0)",
zIndex: 100,
}}
>
<div style={{ display: "flex", gap: "1.5rem", alignItems: "center" }}>
{stats}
</div>
{hasPagination && (
<div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
<div style={{ display: "flex", gap: "0.5rem", alignItems: "center" }}>
<button
onClick={() => onPageChange(Math.max(1, page - 1))}
disabled={page <= 1}
@@ -47,7 +55,11 @@ export function PageFooter({ stats, page, pageSize, itemCount, onPageChange }: P
</span>
<button
onClick={() => onPageChange(page + 1)}
disabled={pageSize !== undefined && itemCount !== undefined && itemCount < pageSize}
disabled={
pageSize !== undefined &&
itemCount !== undefined &&
itemCount < pageSize
}
style={pageBtnStyle}
>
Next
@@ -59,11 +71,11 @@ export function PageFooter({ stats, page, pageSize, itemCount, onPageChange }: P
}
const pageBtnStyle: React.CSSProperties = {
padding: '0.15rem 0.4rem',
fontSize: 'inherit',
border: 'none',
borderRadius: '0.25rem',
backgroundColor: 'var(--ctp-surface1)',
color: 'var(--ctp-text)',
cursor: 'pointer',
padding: "0.25rem 0.5rem",
fontSize: "inherit",
border: "none",
borderRadius: "0.25rem",
backgroundColor: "var(--ctp-surface1)",
color: "var(--ctp-text)",
cursor: "pointer",
};

8
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.375rem",
borderRadius: "0.25rem",
cursor: "text",
minHeight: "1.8rem",
}}
@@ -137,7 +137,7 @@ export function TagInput({
display: "inline-flex",
alignItems: "center",
gap: "0.25rem",
padding: "0.15rem 0.5rem",
padding: "0.25rem 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.15rem 0",
padding: "0.25rem 0",
}}
/>
</div>
@@ -202,7 +202,7 @@ export function TagInput({
marginTop: "0.25rem",
backgroundColor: "var(--ctp-surface0)",
border: "1px solid var(--ctp-surface1)",
borderRadius: "0.375rem",
borderRadius: "0.25rem",
maxHeight: "160px",
overflowY: "auto",
}}

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

@@ -218,7 +218,7 @@ export function AuditDetailPanel({
<span
style={{
display: "inline-block",
padding: "0.15rem 0.5rem",
padding: "0.25rem 0.5rem",
borderRadius: "1rem",
fontSize: "0.75rem",
fontWeight: 600,
@@ -477,10 +477,10 @@ function FieldRow({
placeholder="---"
style={{
flex: 1,
padding: "0.25rem 0.4rem",
padding: "0.25rem 0.5rem",
fontSize: "var(--font-table)",
border: "1px solid var(--ctp-surface1)",
borderRadius: "0.375rem",
borderRadius: "0.25rem",
backgroundColor: "var(--ctp-surface0)",
color: "var(--ctp-text)",
outline: "none",
@@ -495,7 +495,7 @@ const closeBtnStyle: React.CSSProperties = {
padding: "0.25rem 0.5rem",
fontSize: "var(--font-table)",
border: "none",
borderRadius: "0.375rem",
borderRadius: "0.25rem",
backgroundColor: "var(--ctp-surface1)",
color: "var(--ctp-subtext1)",
cursor: "pointer",

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

@@ -70,7 +70,7 @@ export function AuditSummaryBar({
style={{
display: "flex",
gap: "1.5rem",
marginTop: "0.4rem",
marginTop: "0.5rem",
fontSize: "var(--font-table)",
color: "var(--ctp-subtext0)",
}}

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

@@ -103,7 +103,7 @@ export function AuditTable({
<span
style={{
display: "inline-block",
padding: "0.15rem 0.5rem",
padding: "0.25rem 0.5rem",
borderRadius: "1rem",
fontSize: "0.75rem",
fontWeight: 600,

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

@@ -97,7 +97,7 @@ export function AuditToolbar({
const selectStyle: React.CSSProperties = {
padding: "var(--d-input-py) var(--d-input-px)",
fontSize: "var(--d-input-font)",
borderRadius: "0.4rem",
borderRadius: "0.5rem",
border: "1px solid var(--ctp-surface1)",
backgroundColor: "var(--ctp-surface0)",
color: "var(--ctp-text)",
@@ -106,7 +106,7 @@ const selectStyle: React.CSSProperties = {
const btnStyle: React.CSSProperties = {
padding: "var(--d-input-py) var(--d-input-px)",
fontSize: "var(--d-input-font)",
borderRadius: "0.4rem",
borderRadius: "0.5rem",
border: "none",
backgroundColor: "var(--ctp-surface1)",
color: "var(--ctp-subtext1)",

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

@@ -118,11 +118,11 @@ export function BOMTab({ partNumber, isEditor }: BOMTabProps) {
};
const inputStyle: React.CSSProperties = {
padding: "0.25rem 0.4rem",
padding: "0.25rem 0.5rem",
fontSize: "var(--font-table)",
backgroundColor: "var(--ctp-base)",
border: "1px solid var(--ctp-surface1)",
borderRadius: "0.375rem",
borderRadius: "0.25rem",
color: "var(--ctp-text)",
width: "100%",
};
@@ -240,7 +240,7 @@ export function BOMTab({ partNumber, isEditor }: BOMTabProps) {
...toolBtnStyle,
display: "inline-flex",
alignItems: "center",
gap: "0.35rem",
gap: "0.25rem",
}}
>
<Download size={14} /> Export CSV
@@ -256,7 +256,7 @@ export function BOMTab({ partNumber, isEditor }: BOMTabProps) {
...toolBtnStyle,
display: "inline-flex",
alignItems: "center",
gap: "0.35rem",
gap: "0.25rem",
}}
>
<Plus size={14} /> Add
@@ -267,9 +267,9 @@ export function BOMTab({ partNumber, isEditor }: BOMTabProps) {
{isEditor && assemblyCount > 0 && (
<div
style={{
padding: "0.35rem 0.5rem",
padding: "0.25rem 0.5rem",
marginBottom: "0.5rem",
borderRadius: "0.375rem",
borderRadius: "0.25rem",
backgroundColor: "rgba(148,226,213,0.1)",
border: "1px solid rgba(148,226,213,0.3)",
fontSize: "0.75rem",
@@ -438,7 +438,7 @@ const toolBtnStyle: React.CSSProperties = {
fontSize: "0.75rem",
fontWeight: 500,
border: "none",
borderRadius: "0.375rem",
borderRadius: "0.25rem",
backgroundColor: "var(--ctp-surface1)",
color: "var(--ctp-text)",
cursor: "pointer",
@@ -451,16 +451,16 @@ const actionBtnStyle: React.CSSProperties = {
cursor: "pointer",
fontSize: "0.75rem",
fontWeight: 500,
padding: "0.15rem 0.25rem",
borderRadius: "0.375rem",
padding: "0.25rem 0.25rem",
borderRadius: "0.25rem",
};
const saveBtnStyle: React.CSSProperties = {
padding: "0.25rem 0.4rem",
padding: "0.25rem 0.5rem",
fontSize: "0.75rem",
fontWeight: 500,
border: "none",
borderRadius: "0.375rem",
borderRadius: "0.25rem",
backgroundColor: "var(--ctp-green)",
color: "var(--ctp-crust)",
cursor: "pointer",
@@ -468,7 +468,7 @@ const saveBtnStyle: React.CSSProperties = {
};
const sourceBadgeBase: React.CSSProperties = {
padding: "0.15rem 0.4rem",
padding: "0.25rem 0.5rem",
borderRadius: "1rem",
fontSize: "var(--font-sm)",
fontWeight: 500,
@@ -487,11 +487,11 @@ const manualBadge: React.CSSProperties = {
};
const cancelBtnStyle: React.CSSProperties = {
padding: "0.25rem 0.4rem",
padding: "0.25rem 0.5rem",
fontSize: "0.75rem",
fontWeight: 500,
border: "none",
borderRadius: "0.375rem",
borderRadius: "0.25rem",
backgroundColor: "var(--ctp-surface1)",
color: "var(--ctp-subtext1)",
cursor: "pointer",

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

@@ -62,7 +62,7 @@ export function CategoryPicker({
<div
style={{
border: "1px solid var(--ctp-surface1)",
borderRadius: "0.4rem",
borderRadius: "0.5rem",
backgroundColor: "var(--ctp-base)",
overflow: "hidden",
}}
@@ -74,7 +74,7 @@ export function CategoryPicker({
display: "flex",
flexWrap: "wrap",
gap: "0.25rem",
padding: "0.4rem 0.5rem",
padding: "0.5rem 0.5rem",
borderBottom: "1px solid var(--ctp-surface1)",
backgroundColor: "var(--ctp-mantle)",
}}
@@ -99,7 +99,7 @@ export function CategoryPicker({
fontSize: "0.75rem",
fontWeight: 500,
border: "none",
borderRadius: "0.375rem",
borderRadius: "0.25rem",
cursor: "pointer",
backgroundColor: isActive
? "rgba(203,166,247,0.2)"
@@ -133,7 +133,7 @@ export function CategoryPicker({
disabled={isMultiStage && !selectedDomain}
style={{
width: "100%",
padding: "0.4rem 0.5rem",
padding: "0.5rem 0.5rem",
fontSize: "var(--font-table)",
border: "none",
borderBottom: "1px solid var(--ctp-surface1)",

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

@@ -382,7 +382,7 @@ export function CreateItemPane({ onCreated, onCancel }: CreateItemPaneProps) {
onClick={handleThumbnailSelect}
style={{
aspectRatio: "4/3",
borderRadius: "0.4rem",
borderRadius: "0.5rem",
border: "1px dashed var(--ctp-surface1)",
display: "flex",
alignItems: "center",
@@ -619,7 +619,7 @@ function SidebarSection({
textTransform: "uppercase",
letterSpacing: "0.05em",
color: "var(--ctp-subtext0)",
marginBottom: "0.4rem",
marginBottom: "0.5rem",
}}
>
{title}
@@ -636,7 +636,7 @@ function MetaRow({ label, value }: { label: string; value: string }) {
display: "flex",
justifyContent: "space-between",
fontSize: "var(--font-table)",
padding: "0.15rem 0",
padding: "0.25rem 0",
}}
>
<span style={{ color: "var(--ctp-subtext0)" }}>{label}</span>
@@ -686,7 +686,7 @@ const actionBtnStyle: React.CSSProperties = {
fontSize: "0.75rem",
fontWeight: 500,
border: "none",
borderRadius: "0.375rem",
borderRadius: "0.25rem",
color: "var(--ctp-crust)",
cursor: "pointer",
};
@@ -698,17 +698,17 @@ const cancelBtnStyle: React.CSSProperties = {
color: "var(--ctp-subtext1)",
fontSize: "0.75rem",
fontWeight: 500,
padding: "0.25rem 0.4rem",
borderRadius: "0.375rem",
padding: "0.25rem 0.5rem",
borderRadius: "0.25rem",
};
const inputStyle: React.CSSProperties = {
width: "100%",
padding: "0.35rem 0.5rem",
padding: "0.25rem 0.5rem",
fontSize: "var(--font-body)",
backgroundColor: "var(--ctp-base)",
border: "1px solid var(--ctp-surface1)",
borderRadius: "0.375rem",
borderRadius: "0.25rem",
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.375rem",
borderRadius: "0.25rem",
marginBottom: "0.5rem",
fontSize: "var(--font-body)",
};

10
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.375rem",
borderRadius: "0.25rem",
fontSize: "var(--font-body)",
width: "100%",
textAlign: "center",
@@ -125,7 +125,7 @@ export function DeleteItemPane({
fontSize: "0.75rem",
fontWeight: 500,
border: "none",
borderRadius: "0.375rem",
borderRadius: "0.25rem",
backgroundColor: "var(--ctp-surface1)",
color: "var(--ctp-text)",
cursor: "pointer",
@@ -141,7 +141,7 @@ export function DeleteItemPane({
fontSize: "0.75rem",
fontWeight: 500,
border: "none",
borderRadius: "0.375rem",
borderRadius: "0.25rem",
backgroundColor: "var(--ctp-red)",
color: "var(--ctp-crust)",
cursor: "pointer",
@@ -163,6 +163,6 @@ const headerBtnStyle: React.CSSProperties = {
color: "var(--ctp-subtext1)",
fontSize: "0.75rem",
fontWeight: 500,
padding: "0.25rem 0.4rem",
borderRadius: "0.375rem",
padding: "0.25rem 0.5rem",
borderRadius: "0.25rem",
};

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

@@ -93,7 +93,7 @@ export function EditItemPane({
fontSize: "0.75rem",
fontWeight: 500,
border: "none",
borderRadius: "0.375rem",
borderRadius: "0.25rem",
backgroundColor: "var(--ctp-blue)",
color: "var(--ctp-crust)",
cursor: "pointer",
@@ -114,7 +114,7 @@ export function EditItemPane({
color: "var(--ctp-red)",
backgroundColor: "rgba(243,139,168,0.1)",
padding: "0.5rem",
borderRadius: "0.375rem",
borderRadius: "0.25rem",
marginBottom: "0.5rem",
fontSize: "var(--font-body)",
}}
@@ -208,11 +208,11 @@ function FormGroup({
const inputStyle: React.CSSProperties = {
width: "100%",
padding: "0.35rem 0.5rem",
padding: "0.25rem 0.5rem",
fontSize: "var(--font-body)",
backgroundColor: "var(--ctp-base)",
border: "1px solid var(--ctp-surface1)",
borderRadius: "0.375rem",
borderRadius: "0.25rem",
color: "var(--ctp-text)",
};
@@ -223,6 +223,6 @@ const headerBtnStyle: React.CSSProperties = {
color: "var(--ctp-subtext1)",
fontSize: "0.75rem",
fontWeight: 500,
padding: "0.25rem 0.4rem",
borderRadius: "0.375rem",
padding: "0.25rem 0.5rem",
borderRadius: "0.25rem",
};

20
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.375rem",
borderRadius: "0.25rem",
marginBottom: "0.5rem",
fontSize: "var(--font-body)",
}}
@@ -164,7 +164,7 @@ export function ImportItemsPane({
style={{
display: "flex",
alignItems: "center",
gap: "0.4rem",
gap: "0.5rem",
fontSize: "var(--font-body)",
color: "var(--ctp-subtext1)",
marginBottom: "0.75rem",
@@ -187,11 +187,11 @@ export function ImportItemsPane({
onClick={() => void doImport(true)}
disabled={!file || importing}
style={{
padding: "0.4rem 0.75rem",
padding: "0.5rem 0.75rem",
fontSize: "0.75rem",
fontWeight: 500,
border: "none",
borderRadius: "0.375rem",
borderRadius: "0.25rem",
backgroundColor: "var(--ctp-yellow)",
color: "var(--ctp-crust)",
cursor: "pointer",
@@ -205,11 +205,11 @@ export function ImportItemsPane({
onClick={() => void doImport(false)}
disabled={importing || (result?.error_count ?? 0) > 0}
style={{
padding: "0.4rem 0.75rem",
padding: "0.5rem 0.75rem",
fontSize: "0.75rem",
fontWeight: 500,
border: "none",
borderRadius: "0.375rem",
borderRadius: "0.25rem",
backgroundColor: "var(--ctp-green)",
color: "var(--ctp-crust)",
cursor: "pointer",
@@ -227,7 +227,7 @@ export function ImportItemsPane({
style={{
padding: "0.5rem",
backgroundColor: "var(--ctp-surface0)",
borderRadius: "0.4rem",
borderRadius: "0.5rem",
fontSize: "var(--font-table)",
}}
>
@@ -262,7 +262,7 @@ export function ImportItemsPane({
style={{
color: "var(--ctp-red)",
fontSize: "0.75rem",
padding: "0.15rem 0",
padding: "0.25rem 0",
}}
>
Row {err.row}
@@ -296,6 +296,6 @@ const headerBtnStyle: React.CSSProperties = {
color: "var(--ctp-subtext1)",
fontSize: "0.75rem",
fontWeight: 500,
padding: "0.25rem 0.4rem",
borderRadius: "0.375rem",
padding: "0.25rem 0.5rem",
borderRadius: "0.25rem",
};

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

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

6
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.15rem 0.5rem",
padding: "0.25rem 0.5rem",
borderRadius: "1rem",
fontSize: "0.75rem",
fontWeight: 500,
@@ -398,6 +398,6 @@ const actionBtnStyle: React.CSSProperties = {
cursor: "pointer",
fontSize: "0.75rem",
fontWeight: 500,
padding: "0.15rem 0.4rem",
borderRadius: "0.375rem",
padding: "0.25rem 0.5rem",
borderRadius: "0.25rem",
};

14
web/src/components/items/ItemsToolbar.tsx
View File

@@ -41,7 +41,7 @@ export function ItemsToolbar({
fontSize: "0.75rem",
fontWeight: 500,
border: "none",
borderRadius: "0.375rem",
borderRadius: "0.25rem",
cursor: "pointer",
backgroundColor:
filters.searchScope === scope
@@ -81,7 +81,7 @@ export function ItemsToolbar({
padding: "var(--d-input-py) var(--d-input-px)",
backgroundColor: "var(--ctp-surface0)",
border: "1px solid var(--ctp-surface1)",
borderRadius: "0.4rem",
borderRadius: "0.5rem",
color: "var(--ctp-text)",
fontSize: "var(--d-input-font)",
}}
@@ -144,7 +144,7 @@ export function ItemsToolbar({
...toolBtnStyle,
display: "inline-flex",
alignItems: "center",
gap: "0.35rem",
gap: "0.25rem",
}}
title="Export CSV"
>
@@ -159,7 +159,7 @@ export function ItemsToolbar({
...toolBtnStyle,
display: "inline-flex",
alignItems: "center",
gap: "0.35rem",
gap: "0.25rem",
}}
title="Import CSV"
>
@@ -177,7 +177,7 @@ export function ItemsToolbar({
color: "var(--ctp-crust)",
display: "inline-flex",
alignItems: "center",
gap: "0.35rem",
gap: "0.25rem",
}}
>
<Plus size={14} /> New
@@ -191,7 +191,7 @@ const selectStyle: React.CSSProperties = {
padding: "var(--d-input-py) var(--d-input-px)",
backgroundColor: "var(--ctp-surface0)",
border: "1px solid var(--ctp-surface1)",
borderRadius: "0.4rem",
borderRadius: "0.5rem",
color: "var(--ctp-text)",
fontSize: "var(--d-input-font)",
};
@@ -200,7 +200,7 @@ const toolBtnStyle: React.CSSProperties = {
padding: "var(--d-input-py) var(--d-input-px)",
backgroundColor: "var(--ctp-surface1)",
border: "none",
borderRadius: "0.375rem",
borderRadius: "0.25rem",
color: "var(--ctp-text)",
fontSize: "0.75rem",
fontWeight: 500,

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

@@ -134,7 +134,7 @@ export function MainTab({ item, onReload, isEditor }: MainTabProps) {
marginTop: "0.75rem",
padding: "0.5rem",
backgroundColor: "var(--ctp-surface0)",
borderRadius: "0.4rem",
borderRadius: "0.5rem",
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.15rem 0.5rem",
padding: "0.25rem 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.15rem 0.25rem",
padding: "0.25rem 0.25rem",
fontSize: "0.75rem",
backgroundColor: "var(--ctp-surface0)",
border: "1px solid var(--ctp-surface1)",
borderRadius: "0.375rem",
borderRadius: "0.25rem",
color: "var(--ctp-text)",
}}
>
@@ -229,12 +229,12 @@ export function MainTab({ item, onReload, isEditor }: MainTabProps) {
<button
onClick={() => void handleAddProject()}
style={{
padding: "0.15rem 0.4rem",
padding: "0.25rem 0.5rem",
fontSize: "var(--font-sm)",
border: "none",
backgroundColor: "var(--ctp-mauve)",
color: "var(--ctp-crust)",
borderRadius: "0.375rem",
borderRadius: "0.25rem",
cursor: "pointer",
}}
>
@@ -253,7 +253,7 @@ export function MainTab({ item, onReload, isEditor }: MainTabProps) {
marginTop: "0.75rem",
padding: "0.5rem",
backgroundColor: "var(--ctp-surface0)",
borderRadius: "0.4rem",
borderRadius: "0.5rem",
}}
>
<div
@@ -298,7 +298,7 @@ export function MainTab({ item, onReload, isEditor }: MainTabProps) {
border: "none",
backgroundColor: "var(--ctp-surface1)",
color: "var(--ctp-text)",
borderRadius: "0.375rem",
borderRadius: "0.25rem",
cursor: "pointer",
}}
>

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

@@ -125,11 +125,11 @@ export function PropertiesTab({
};
const inputStyle: React.CSSProperties = {
padding: "0.25rem 0.4rem",
padding: "0.25rem 0.5rem",
fontSize: "var(--font-table)",
backgroundColor: "var(--ctp-base)",
border: "1px solid var(--ctp-surface1)",
borderRadius: "0.375rem",
borderRadius: "0.25rem",
color: "var(--ctp-text)",
};
@@ -165,7 +165,7 @@ export function PropertiesTab({
padding: "0.25rem 0.75rem",
fontSize: "var(--font-table)",
border: "none",
borderRadius: "0.375rem",
borderRadius: "0.25rem",
backgroundColor: "var(--ctp-mauve)",
color: "var(--ctp-crust)",
cursor: "pointer",
@@ -250,7 +250,7 @@ export function PropertiesTab({
marginTop: "0.25rem",
display: "inline-flex",
alignItems: "center",
gap: "0.35rem",
gap: "0.25rem",
}}
>
<Plus size={14} /> Add Property
@@ -274,7 +274,7 @@ export function PropertiesTab({
fontSize: "var(--font-table)",
backgroundColor: "var(--ctp-base)",
border: "1px solid var(--ctp-surface1)",
borderRadius: "0.4rem",
borderRadius: "0.5rem",
color: "var(--ctp-text)",
resize: "vertical",
}}
@@ -300,7 +300,7 @@ const tabBtn: React.CSSProperties = {
padding: "0.25rem 0.5rem",
fontSize: "var(--font-table)",
border: "none",
borderRadius: "0.375rem",
borderRadius: "0.25rem",
backgroundColor: "var(--ctp-surface0)",
color: "var(--ctp-subtext1)",
cursor: "pointer",

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

@@ -97,11 +97,11 @@ export function RevisionsTab({ partNumber, isEditor }: RevisionsTabProps) {
);
const selectStyle: React.CSSProperties = {
padding: "0.25rem 0.4rem",
padding: "0.25rem 0.5rem",
fontSize: "var(--font-table)",
backgroundColor: "var(--ctp-surface0)",
border: "1px solid var(--ctp-surface1)",
borderRadius: "0.375rem",
borderRadius: "0.25rem",
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.375rem",
borderRadius: "0.25rem",
backgroundColor: "var(--ctp-mauve)",
color: "var(--ctp-crust)",
cursor: "pointer",
@@ -164,7 +164,7 @@ export function RevisionsTab({ partNumber, isEditor }: RevisionsTabProps) {
style={{
padding: "0.5rem",
backgroundColor: "var(--ctp-surface0)",
borderRadius: "0.4rem",
borderRadius: "0.5rem",
fontSize: "var(--font-table)",
marginBottom: "0.75rem",
fontFamily: "'JetBrains Mono', monospace",
@@ -250,10 +250,10 @@ export function RevisionsTab({ partNumber, isEditor }: RevisionsTabProps) {
)
}
style={{
padding: "0.15rem 0.25rem",
padding: "0.25rem 0.25rem",
fontSize: "0.75rem",
border: "none",
borderRadius: "0.375rem",
borderRadius: "0.25rem",
backgroundColor: "transparent",
color: statusColors[rev.status] ?? "var(--ctp-text)",
cursor: "pointer",

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

@@ -216,7 +216,7 @@ export function ProjectsPage() {
...btnPrimaryStyle,
display: "inline-flex",
alignItems: "center",
gap: "0.35rem",
gap: "0.25rem",
}}
>
<Plus size={14} /> New Project
@@ -465,7 +465,7 @@ export function ProjectsPage() {
// Styles
const btnPrimaryStyle: React.CSSProperties = {
padding: "0.5rem 1rem",
borderRadius: "0.375rem",
borderRadius: "0.25rem",
border: "none",
backgroundColor: "var(--ctp-mauve)",
color: "var(--ctp-crust)",
@@ -476,7 +476,7 @@ const btnPrimaryStyle: React.CSSProperties = {
const btnSecondaryStyle: React.CSSProperties = {
padding: "0.5rem 1rem",
borderRadius: "0.375rem",
borderRadius: "0.25rem",
border: "none",
backgroundColor: "var(--ctp-surface1)",
color: "var(--ctp-text)",
@@ -487,7 +487,7 @@ const btnSecondaryStyle: React.CSSProperties = {
const btnDangerStyle: React.CSSProperties = {
padding: "0.5rem 1rem",
borderRadius: "0.375rem",
borderRadius: "0.25rem",
border: "none",
backgroundColor: "var(--ctp-red)",
color: "var(--ctp-crust)",
@@ -498,7 +498,7 @@ const btnDangerStyle: React.CSSProperties = {
const btnSmallStyle: React.CSSProperties = {
padding: "0.25rem 0.5rem",
borderRadius: "0.375rem",
borderRadius: "0.25rem",
border: "none",
backgroundColor: "var(--ctp-surface1)",
color: "var(--ctp-text)",
@@ -530,7 +530,7 @@ const formCloseStyle: React.CSSProperties = {
cursor: "pointer",
fontSize: "0.75rem",
fontWeight: 500,
borderRadius: "0.375rem",
borderRadius: "0.25rem",
};
const errorBannerStyle: React.CSSProperties = {
@@ -538,7 +538,7 @@ const errorBannerStyle: React.CSSProperties = {
background: "rgba(243, 139, 168, 0.1)",
border: "1px solid rgba(243, 139, 168, 0.2)",
padding: "0.5rem 0.75rem",
borderRadius: "0.4rem",
borderRadius: "0.5rem",
marginBottom: "0.75rem",
fontSize: "var(--font-body)",
};
@@ -549,7 +549,7 @@ const fieldStyle: React.CSSProperties = {
const labelStyle: React.CSSProperties = {
display: "block",
marginBottom: "0.35rem",
marginBottom: "0.25rem",
fontWeight: 500,
color: "var(--ctp-subtext1)",
fontSize: "var(--font-body)",
@@ -560,7 +560,7 @@ const inputStyle: React.CSSProperties = {
padding: "0.5rem 0.75rem",
backgroundColor: "var(--ctp-base)",
border: "1px solid var(--ctp-surface1)",
borderRadius: "0.4rem",
borderRadius: "0.5rem",
color: "var(--ctp-text)",
fontSize: "var(--font-body)",
boxSizing: "border-box",
@@ -587,7 +587,7 @@ const thStyle: React.CSSProperties = {
};
const tdStyle: React.CSSProperties = {
padding: "0.35rem 0.75rem",
padding: "0.25rem 0.75rem",
borderBottom: "1px solid var(--ctp-surface1)",
fontSize: "var(--font-body)",
};

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

@@ -657,7 +657,7 @@ function SegmentBlock({
marginTop: "0.5rem",
display: "inline-flex",
alignItems: "center",
gap: "0.35rem",
gap: "0.25rem",
}}
>
<Plus size={14} /> Add Value
@@ -692,7 +692,7 @@ const segmentStyle: React.CSSProperties = {
const typeBadgeStyle: React.CSSProperties = {
display: "inline-block",
padding: "0.15rem 0.5rem",
padding: "0.25rem 0.5rem",
borderRadius: "0.25rem",
fontSize: "0.75rem",
fontWeight: 600,
@@ -707,7 +707,7 @@ const emptyStyle: React.CSSProperties = {
};
const thStyle: React.CSSProperties = {
padding: "0.4rem 0.75rem",
padding: "0.5rem 0.75rem",
textAlign: "left",
borderBottom: "1px solid var(--ctp-surface1)",
color: "var(--ctp-overlay1)",
@@ -725,7 +725,7 @@ const tdStyle: React.CSSProperties = {
const btnTinyStyle: React.CSSProperties = {
padding: "0.25rem 0.5rem",
borderRadius: "0.375rem",
borderRadius: "0.25rem",
border: "none",
backgroundColor: "var(--ctp-surface1)",
color: "var(--ctp-text)",
@@ -736,7 +736,7 @@ const btnTinyStyle: React.CSSProperties = {
const btnTinyPrimaryStyle: React.CSSProperties = {
padding: "0.25rem 0.5rem",
borderRadius: "0.375rem",
borderRadius: "0.25rem",
border: "none",
backgroundColor: "var(--ctp-mauve)",
color: "var(--ctp-crust)",

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

@@ -114,7 +114,7 @@ export function SettingsPage() {
<span
style={{
display: "inline-block",
padding: "0.15rem 0.5rem",
padding: "0.25rem 0.5rem",
borderRadius: "1rem",
fontSize: "var(--font-table)",
fontWeight: 600,
@@ -386,7 +386,7 @@ const createFormStyle: React.CSSProperties = {
const labelStyle: React.CSSProperties = {
display: "block",
marginBottom: "0.35rem",
marginBottom: "0.25rem",
fontWeight: 500,
color: "var(--ctp-subtext1)",
fontSize: "var(--font-body)",
@@ -397,7 +397,7 @@ const inputStyle: React.CSSProperties = {
padding: "0.5rem 0.75rem",
backgroundColor: "var(--ctp-base)",
border: "1px solid var(--ctp-surface1)",
borderRadius: "0.4rem",
borderRadius: "0.5rem",
color: "var(--ctp-text)",
fontSize: "var(--font-body)",
boxSizing: "border-box",
@@ -405,7 +405,7 @@ const inputStyle: React.CSSProperties = {
const btnPrimaryStyle: React.CSSProperties = {
padding: "0.5rem 1rem",
borderRadius: "0.375rem",
borderRadius: "0.25rem",
border: "none",
backgroundColor: "var(--ctp-mauve)",
color: "var(--ctp-crust)",
@@ -416,10 +416,10 @@ const btnPrimaryStyle: React.CSSProperties = {
};
const btnCopyStyle: React.CSSProperties = {
padding: "0.4rem 0.75rem",
padding: "0.5rem 0.75rem",
background: "var(--ctp-surface1)",
border: "none",
borderRadius: "0.375rem",
borderRadius: "0.25rem",
color: "var(--ctp-text)",
cursor: "pointer",
fontSize: "0.75rem",
@@ -427,10 +427,10 @@ const btnCopyStyle: React.CSSProperties = {
};
const btnDismissStyle: React.CSSProperties = {
padding: "0.4rem 0.75rem",
padding: "0.5rem 0.75rem",
background: "none",
border: "none",
borderRadius: "0.375rem",
borderRadius: "0.25rem",
color: "var(--ctp-subtext0)",
cursor: "pointer",
fontSize: "0.75rem",
@@ -442,7 +442,7 @@ const btnDangerStyle: React.CSSProperties = {
color: "var(--ctp-red)",
border: "none",
padding: "0.25rem 0.5rem",
borderRadius: "0.375rem",
borderRadius: "0.25rem",
cursor: "pointer",
fontSize: "0.75rem",
fontWeight: 500,
@@ -453,7 +453,7 @@ const btnRevokeConfirmStyle: React.CSSProperties = {
color: "var(--ctp-crust)",
border: "none",
padding: "0.25rem 0.5rem",
borderRadius: "0.375rem",
borderRadius: "0.25rem",
cursor: "pointer",
fontSize: "0.75rem",
fontWeight: 500,
@@ -461,7 +461,7 @@ const btnRevokeConfirmStyle: React.CSSProperties = {
const btnTinyStyle: React.CSSProperties = {
padding: "0.25rem 0.5rem",
borderRadius: "0.375rem",
borderRadius: "0.25rem",
border: "none",
backgroundColor: "var(--ctp-surface1)",
color: "var(--ctp-text)",
@@ -488,7 +488,7 @@ const thStyle: React.CSSProperties = {
};
const tdStyle: React.CSSProperties = {
padding: "0.4rem 0.75rem",
padding: "0.5rem 0.75rem",
borderBottom: "1px solid var(--ctp-surface1)",
fontSize: "var(--font-body)",
};

6
web/src/styles/silo-base.css
View File

@@ -1,6 +1,8 @@
/* Focus and hover states for form inputs */
.silo-input {
transition: border-color 0.15s ease, box-shadow 0.15s ease;
transition:
border-color 0.15s ease,
box-shadow 0.15s ease;
}
.silo-input:hover {
@@ -9,6 +11,6 @@
.silo-input:focus {
border-color: var(--ctp-mauve);
box-shadow: 0 0 0 0.2rem rgba(203, 166, 247, 0.25);
box-shadow: 0 0 0 0.25rem rgba(203, 166, 247, 0.25);
outline: none;
}

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

@@ -44,13 +44,13 @@
--d-header-px: 2rem;
--d-header-logo: 1.25rem;
--d-nav-gap: 1rem;
--d-nav-py: 0.35rem;
--d-nav-py: 0.25rem;
--d-nav-px: 0.75rem;
--d-nav-radius: 0.4rem;
--d-user-gap: 0.6rem;
--d-nav-radius: 0.5rem;
--d-user-gap: 0.5rem;
--d-user-font: var(--font-body);
--d-th-py: 0.35rem;
--d-th-py: 0.25rem;
--d-th-px: 0.75rem;
--d-th-font: var(--font-table);
--d-td-py: 0.25rem;
@@ -59,9 +59,9 @@
--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-toolbar-mb: 0.25rem;
--d-input-py: 0.25rem;
--d-input-px: 0.5rem;
--d-input-font: var(--font-body);
--d-footer-h: 28px;
@@ -71,28 +71,28 @@
/* ── Density: compact ── */
[data-density="compact"] {
--d-header-py: 0.35rem;
--d-header-py: 0.25rem;
--d-header-px: 1.25rem;
--d-header-logo: 1.1rem;
--d-nav-gap: 0.5rem;
--d-nav-py: 0.2rem;
--d-nav-py: 0.25rem;
--d-nav-px: 0.5rem;
--d-nav-radius: 0.3rem;
--d-user-gap: 0.35rem;
--d-nav-radius: 0.25rem;
--d-user-gap: 0.25rem;
--d-user-font: var(--font-table);
--d-th-py: 0.2rem;
--d-th-py: 0.25rem;
--d-th-px: 0.5rem;
--d-th-font: var(--font-sm);
--d-td-py: 0.125rem;
--d-td-py: 0.25rem;
--d-td-px: 0.5rem;
--d-td-font: var(--font-table);
--d-toolbar-gap: 0.35rem;
--d-toolbar-gap: 0.25rem;
--d-toolbar-py: 0.25rem;
--d-toolbar-mb: 0.15rem;
--d-input-py: 0.2rem;
--d-input-px: 0.4rem;
--d-toolbar-mb: 0.25rem;
--d-input-py: 0.25rem;
--d-input-px: 0.5rem;
--d-input-font: var(--font-table);
--d-footer-h: 24px;