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

feat(web): add input focus states via silo-base.css (#72)

Browse Source 
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
This commit is contained in:
Forbes
2026-02-13 13:24:39 -06:00
parent a9614e704e
commit f4a1c8004b
8 changed files with 35 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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)}

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

@@ -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" }}

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

@@ -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)}

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

@@ -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)}

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

@@ -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

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

@@ -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>

1
web/src/styles/global.css
View File

@@ -1,4 +1,5 @@
@import "./theme.css";
@import "./silo-base.css";
*,
*::before,

14
web/src/styles/silo-base.css Normal file
View File

@@ -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;
}