From f4a1c8004bf3c2f3f31423fe56d340d72afb3d6d Mon Sep 17 00:00:00 2001
From: Forbes <forbes@kindred-systems.com>
Date: Fri, 13 Feb 2026 13:24:39 -0600
Subject: [PATCH] feat(web): add input focus states via silo-base.css (#72)

Create silo-base.css with .silo-input hover/focus pseudo-classes:
- hover: border-color overlay0
- focus: border-color mauve + 0.2rem mauve box-shadow

Applied className='silo-input' to form inputs in:
CreateItemPane, EditItemPane, ProjectsPage, SchemasPage,
SettingsPage, LoginPage

Closes #72
---
 web/src/components/items/CreateItemPane.tsx |  6 ++++++
 web/src/components/items/EditItemPane.tsx   |  5 +++++
 web/src/pages/LoginPage.tsx                 |  2 ++
 web/src/pages/ProjectsPage.tsx              |  3 +++
 web/src/pages/SchemasPage.tsx               |  3 +++
 web/src/pages/SettingsPage.tsx              |  1 +
 web/src/styles/global.css                   |  1 +
 web/src/styles/silo-base.css                | 14 ++++++++++++++
 8 files changed, 35 insertions(+)
 create mode 100644 web/src/styles/silo-base.css

diff --git a/web/src/components/items/CreateItemPane.tsx b/web/src/components/items/CreateItemPane.tsx
index 800a8ac..cac706f 100644
--- a/web/src/components/items/CreateItemPane.tsx
+++ b/web/src/components/items/CreateItemPane.tsx
@@ -453,6 +453,7 @@ function renderField(
       <div key={field.name} style={{ gridColumn: "1 / -1" }}>
         <FormGroup label={field.label}>
           <textarea
+            className="silo-input"
             value={value}
             onChange={(e) => onChange(e.target.value)}
             style={{ ...inputStyle, minHeight: 60, resize: "vertical" }}
@@ -467,6 +468,7 @@ function renderField(
     return (
       <FormGroup key={field.name} label={field.label}>
         <select
+          className="silo-input"
           value={value || (field.default != null ? String(field.default) : "")}
           onChange={(e) => onChange(e.target.value)}
           style={inputStyle}
@@ -486,6 +488,7 @@ function renderField(
     return (
       <FormGroup key={field.name} label={field.label}>
         <select
+          className="silo-input"
           value={value}
           onChange={(e) => onChange(e.target.value)}
           style={inputStyle}
@@ -505,6 +508,7 @@ function renderField(
         label={`${field.label}${field.currency ? ` (${field.currency})` : ""}`}
       >
         <input
+          className="silo-input"
           type="number"
           step="0.01"
           value={value}
@@ -521,6 +525,7 @@ function renderField(
       <div key={field.name} style={{ gridColumn: "1 / -1" }}>
         <FormGroup label={field.label}>
           <input
+            className="silo-input"
             type="url"
             value={value}
             onChange={(e) => onChange(e.target.value)}
@@ -541,6 +546,7 @@ function renderField(
   return (
     <FormGroup key={field.name} label={field.label}>
       <input
+        className="silo-input"
         type={inputType}
         value={value}
         onChange={(e) => onChange(e.target.value)}
diff --git a/web/src/components/items/EditItemPane.tsx b/web/src/components/items/EditItemPane.tsx
index 5bc6709..10ebdaa 100644
--- a/web/src/components/items/EditItemPane.tsx
+++ b/web/src/components/items/EditItemPane.tsx
@@ -125,6 +125,7 @@ export function EditItemPane({
 
         <FormGroup label="Part Number">
           <input
+            className="silo-input"
             value={pn}
             onChange={(e) => setPN(e.target.value)}
             style={inputStyle}
@@ -133,6 +134,7 @@ export function EditItemPane({
 
         <FormGroup label="Type">
           <select
+            className="silo-input"
             value={itemType}
             onChange={(e) => setItemType(e.target.value)}
             style={inputStyle}
@@ -146,6 +148,7 @@ export function EditItemPane({
 
         <FormGroup label="Description">
           <input
+            className="silo-input"
             value={description}
             onChange={(e) => setDescription(e.target.value)}
             style={inputStyle}
@@ -154,6 +157,7 @@ export function EditItemPane({
 
         <FormGroup label="Sourcing Type">
           <select
+            className="silo-input"
             value={sourcingType}
             onChange={(e) => setSourcingType(e.target.value)}
             style={inputStyle}
@@ -167,6 +171,7 @@ export function EditItemPane({
 
         <FormGroup label="Long Description">
           <textarea
+            className="silo-input"
             value={longDescription}
             onChange={(e) => setLongDescription(e.target.value)}
             style={{ ...inputStyle, minHeight: 80, resize: "vertical" }}
diff --git a/web/src/pages/LoginPage.tsx b/web/src/pages/LoginPage.tsx
index 4e10359..33af26f 100644
--- a/web/src/pages/LoginPage.tsx
+++ b/web/src/pages/LoginPage.tsx
@@ -43,6 +43,7 @@ export function LoginPage() {
           <div style={formGroupStyle}>
             <label style={labelStyle}>Username</label>
             <input
+              className="silo-input"
               type="text"
               value={username}
               onChange={(e) => setUsername(e.target.value)}
@@ -55,6 +56,7 @@ export function LoginPage() {
           <div style={formGroupStyle}>
             <label style={labelStyle}>Password</label>
             <input
+              className="silo-input"
               type="password"
               value={password}
               onChange={(e) => setPassword(e.target.value)}
diff --git a/web/src/pages/ProjectsPage.tsx b/web/src/pages/ProjectsPage.tsx
index baf36a4..a08d59c 100644
--- a/web/src/pages/ProjectsPage.tsx
+++ b/web/src/pages/ProjectsPage.tsx
@@ -235,6 +235,7 @@ export function ProjectsPage() {
                   Code (2-10 characters, uppercase)
                 </label>
                 <input
+                  className="silo-input"
                   type="text"
                   value={formCode}
                   onChange={(e) => setFormCode(e.target.value)}
@@ -249,6 +250,7 @@ export function ProjectsPage() {
             <div style={fieldStyle}>
               <label style={labelStyle}>Name</label>
               <input
+                className="silo-input"
                 type="text"
                 value={formName}
                 onChange={(e) => setFormName(e.target.value)}
@@ -259,6 +261,7 @@ export function ProjectsPage() {
             <div style={fieldStyle}>
               <label style={labelStyle}>Description</label>
               <input
+                className="silo-input"
                 type="text"
                 value={formDesc}
                 onChange={(e) => setFormDesc(e.target.value)}
diff --git a/web/src/pages/SchemasPage.tsx b/web/src/pages/SchemasPage.tsx
index abb0eeb..6e72063 100644
--- a/web/src/pages/SchemasPage.tsx
+++ b/web/src/pages/SchemasPage.tsx
@@ -436,6 +436,7 @@ function SegmentBlock({
                               })
                             }
                             required
+                            className="silo-input"
                             style={inlineInputStyle}
                             autoFocus
                           />
@@ -573,6 +574,7 @@ function SegmentBlock({
                       }
                       placeholder="Code"
                       required
+                      className="silo-input"
                       style={inlineInputStyle}
                       autoFocus
                     />
@@ -597,6 +599,7 @@ function SegmentBlock({
                         }
                         placeholder="Description"
                         required
+                        className="silo-input"
                         style={inlineInputStyle}
                       />
                       <button
diff --git a/web/src/pages/SettingsPage.tsx b/web/src/pages/SettingsPage.tsx
index 1b4d99c..46d3331 100644
--- a/web/src/pages/SettingsPage.tsx
+++ b/web/src/pages/SettingsPage.tsx
@@ -194,6 +194,7 @@ export function SettingsPage() {
               onChange={(e) => setTokenName(e.target.value)}
               placeholder="e.g., FreeCAD workstation"
               required
+              className="silo-input"
               style={inputStyle}
             />
           </div>
diff --git a/web/src/styles/global.css b/web/src/styles/global.css
index 0713022..49a5d48 100644
--- a/web/src/styles/global.css
+++ b/web/src/styles/global.css
@@ -1,4 +1,5 @@
 @import "./theme.css";
+@import "./silo-base.css";
 
 *,
 *::before,
diff --git a/web/src/styles/silo-base.css b/web/src/styles/silo-base.css
new file mode 100644
index 0000000..ef690c9
--- /dev/null
+++ b/web/src/styles/silo-base.css
@@ -0,0 +1,14 @@
+/* Focus and hover states for form inputs */
+.silo-input {
+    transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.silo-input:hover {
+    border-color: var(--ctp-overlay0);
+}
+
+.silo-input:focus {
+    border-color: var(--ctp-mauve);
+    box-shadow: 0 0 0 0.2rem rgba(203, 166, 247, 0.25);
+    outline: none;
+}