add WCAG-compliant input border contrast across all moods
New --t-border-input token per mood, all 3:1+ contrast against their surface backgrounds (neutral #8c8c8c, warm #8a827a, cool #7a8591, dark #707070). Used on admin inputs/selects/textareas and shop themed-input/themed-select, with graceful fallback to --t-border-default. Decorative borders on cards, dividers, panels are unchanged. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
92a008926e
commit
696843bacd
@ -65,7 +65,7 @@ Based on usability testing (March 2026). Reworks the entire setup flow into a si
|
|||||||
| F | Dashboard checklist and messaging rework | 2h | planned |
|
| F | Dashboard checklist and messaging rework | 2h | planned |
|
||||||
| G | Coming soon page fixes (logo layout, admin login link) | 30m | done |
|
| G | Coming soon page fixes (logo layout, admin login link) | 30m | done |
|
||||||
| H | External links UX (new tabs, icons, aria labels) | 1h | planned |
|
| H | External links UX (new tabs, icons, aria labels) | 1h | planned |
|
||||||
| I | Input styling — WCAG AA/AAA compliance | 1h | planned |
|
| I | Input styling — WCAG AA/AAA compliance | 1h | done |
|
||||||
|
|
||||||
### Notification system overhaul ([plan](docs/plans/notification-overhaul.md))
|
### Notification system overhaul ([plan](docs/plans/notification-overhaul.md))
|
||||||
|
|
||||||
|
|||||||
@ -536,7 +536,7 @@
|
|||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
color: var(--t-text-primary);
|
color: var(--t-text-primary);
|
||||||
background-color: var(--t-surface-base);
|
background-color: var(--t-surface-base);
|
||||||
border: 1px solid var(--t-border-default);
|
border: 1px solid var(--t-border-input, var(--t-border-default));
|
||||||
border-radius: 0.375rem;
|
border-radius: 0.375rem;
|
||||||
transition: border-color 0.15s;
|
transition: border-color 0.15s;
|
||||||
|
|
||||||
|
|||||||
@ -247,7 +247,7 @@
|
|||||||
& .themed-input {
|
& .themed-input {
|
||||||
background-color: var(--t-surface-base);
|
background-color: var(--t-surface-base);
|
||||||
color: var(--t-text-primary);
|
color: var(--t-text-primary);
|
||||||
border: 1px solid var(--t-border-default);
|
border: 1px solid var(--t-border-input, var(--t-border-default));
|
||||||
border-radius: var(--t-radius-input);
|
border-radius: var(--t-radius-input);
|
||||||
padding: 0.5rem 0.75rem;
|
padding: 0.5rem 0.75rem;
|
||||||
|
|
||||||
@ -264,7 +264,7 @@
|
|||||||
& .themed-select {
|
& .themed-select {
|
||||||
background-color: var(--t-surface-raised);
|
background-color: var(--t-surface-raised);
|
||||||
color: var(--t-text-primary);
|
color: var(--t-text-primary);
|
||||||
border: 1px solid var(--t-border-default);
|
border: 1px solid var(--t-border-input, var(--t-border-default));
|
||||||
border-radius: var(--t-radius-input);
|
border-radius: var(--t-radius-input);
|
||||||
padding: 0.375rem 0.75rem;
|
padding: 0.375rem 0.75rem;
|
||||||
font-size: var(--t-text-small);
|
font-size: var(--t-text-small);
|
||||||
|
|||||||
@ -72,6 +72,7 @@ defmodule Berrypod.Theme.CSSGenerator do
|
|||||||
--t-text-inverse: #ffffff;
|
--t-text-inverse: #ffffff;
|
||||||
--t-border-default: #e5e5e5;
|
--t-border-default: #e5e5e5;
|
||||||
--t-border-subtle: #f0f0f0;
|
--t-border-subtle: #f0f0f0;
|
||||||
|
--t-border-input: #8c8c8c;
|
||||||
"""
|
"""
|
||||||
end
|
end
|
||||||
|
|
||||||
@ -88,6 +89,7 @@ defmodule Berrypod.Theme.CSSGenerator do
|
|||||||
--t-text-inverse: #ffffff;
|
--t-text-inverse: #ffffff;
|
||||||
--t-border-default: #e7e0d8;
|
--t-border-default: #e7e0d8;
|
||||||
--t-border-subtle: #f0ebe4;
|
--t-border-subtle: #f0ebe4;
|
||||||
|
--t-border-input: #8a827a;
|
||||||
"""
|
"""
|
||||||
end
|
end
|
||||||
|
|
||||||
@ -104,6 +106,7 @@ defmodule Berrypod.Theme.CSSGenerator do
|
|||||||
--t-text-inverse: #ffffff;
|
--t-text-inverse: #ffffff;
|
||||||
--t-border-default: #d4dce8;
|
--t-border-default: #d4dce8;
|
||||||
--t-border-subtle: #e8eff5;
|
--t-border-subtle: #e8eff5;
|
||||||
|
--t-border-input: #7a8591;
|
||||||
"""
|
"""
|
||||||
end
|
end
|
||||||
|
|
||||||
@ -120,6 +123,7 @@ defmodule Berrypod.Theme.CSSGenerator do
|
|||||||
--t-text-inverse: #171717;
|
--t-text-inverse: #171717;
|
||||||
--t-border-default: #262626;
|
--t-border-default: #262626;
|
||||||
--t-border-subtle: #1c1c1c;
|
--t-border-subtle: #1c1c1c;
|
||||||
|
--t-border-input: #707070;
|
||||||
"""
|
"""
|
||||||
end
|
end
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user