moby/brewlog
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(css): add error/success design tokens, touch targets, and active state

Browse source 
Add error and success color tokens with dark mode support, increase
btn-adjust touch target to 44px on mobile, and add .ss-active highlight
class for keyboard navigation in searchable components.
This commit is contained in:
Jon Seager 2026-02-09 19:54:22 +00:00
parent e0e49f8125
commit 004f92e340
No known key found for this signature in database
1 changed files with 40 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
static/css/input.css
View file

@ -33,6 +33,16 @@
/* Data-viz highlight (RGB triplet for alpha usage in JS) */ /* Data-viz highlight (RGB triplet for alpha usage in JS) */
--highlight-rgb: 194, 65, 12; /* orange-700, matches --accent */ --highlight-rgb: 194, 65, 12; /* orange-700, matches --accent */
/* Feedback */
--error: #dc2626; /* red-600 */
--error-bg: #fef2f2; /* red-50 */
--error-border: rgba(220, 38, 38, 0.3);
--error-text: #991b1b; /* red-800 */
--success: #059669; /* green-600 */
--success-bg: #ecfdf5; /* green-50 */
--success-border: rgba(5, 150, 105, 0.3);
--success-text: #065f46; /* green-800 */
} }
[data-theme="dark"] { [data-theme="dark"] {
@ -55,6 +65,15 @@
--text-muted: #a8a29e; --text-muted: #a8a29e;
--highlight-rgb: 234, 88, 12; /* orange-600, matches --accent */ --highlight-rgb: 234, 88, 12; /* orange-600, matches --accent */
--error: #ef4444;
--error-bg: rgba(220, 38, 38, 0.1);
--error-border: rgba(220, 38, 38, 0.4);
--error-text: #fca5a5;
--success: #34d399;
--success-bg: rgba(5, 150, 105, 0.1);
--success-border: rgba(5, 150, 105, 0.4);
--success-text: #6ee7b7;
} }
/* ── Theme: map raw vars to Tailwind utilities ─────────────────── */ /* ── Theme: map raw vars to Tailwind utilities ─────────────────── */
@ -72,6 +91,14 @@
--color-text-muted: var(--text-muted); --color-text-muted: var(--text-muted);
--color-border: var(--border); --color-border: var(--border);
--color-highlight: rgb(var(--highlight-rgb)); --color-highlight: rgb(var(--highlight-rgb));
--color-error: var(--error);
--color-error-bg: var(--error-bg);
--color-error-border: var(--error-border);
--color-error-text: var(--error-text);
--color-success: var(--success);
--color-success-bg: var(--success-bg);
--color-success-border: var(--success-border);
--color-success-text: var(--success-text);
} }
/* ── Base: default border color ────────────────────────────────── */ /* ── Base: default border color ────────────────────────────────── */
@ -173,6 +200,19 @@ input.input-field[type="number"] {
color: var(--accent-hover); color: var(--accent-hover);
} }
@media (max-width: 767px) {
.btn-adjust {
height: 2.75rem;
width: 2.75rem;
}
}
/* ── Searchable-select keyboard highlight ─────────────────────── */
.ss-active {
background-color: var(--accent-subtle);
}
/* ── Sticky Submit ────────────────────────────────────────────── */ /* ── Sticky Submit ────────────────────────────────────────────── */
.sticky-submit { .sticky-submit {