jamey/berrypod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

refactor: add themed form components for consistent shop styling

Browse Source 
Adds reusable Phoenix components (shop_input, shop_textarea, shop_select,
shop_button, shop_card) backed by semantic CSS classes (.themed-input,
.themed-button, etc.) to eliminate repeated inline styles across templates.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Jamey Greenwood
2026-01-25 19:09:49 +00:00
parent 1b12dc3e7f
commit 7d5896a1e3
7 changed files with 380 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
assets/css/theme-layer2-attributes.css
View File

@@ -240,6 +240,57 @@
color: var(--t-text-inverse);
}
}
/* Themed Form Controls */
& .themed-input {
background-color: var(--t-surface-base);
color: var(--t-text-primary);
border: 1px solid var(--t-border-default);
border-radius: var(--t-radius-input);
&:focus {
outline: none;
border-color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));
}
&::placeholder {
color: var(--t-text-tertiary);
}
}
& .themed-select {
background-color: var(--t-surface-raised);
color: var(--t-text-primary);
border: 1px solid var(--t-border-default);
border-radius: var(--t-radius-input);
&:focus {
outline: none;
border-color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));
}
}
& .themed-button {
background-color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));
color: var(--t-text-inverse);
border-radius: var(--t-radius-button);
border: none;
cursor: pointer;
}
& .themed-button-outline {
background-color: transparent;
color: var(--t-text-primary);
border: 1px solid var(--t-border-default);
border-radius: var(--t-radius-button);
cursor: pointer;
}
& .themed-card {
background-color: var(--t-surface-raised);
border: 1px solid var(--t-border-default);
border-radius: var(--t-radius-card);
}
}
/* Shop nav display - hidden on mobile, flex on md+ (via Tailwind classes in component) */