fix: improve accent color contrast for WCAG AA compliance
Add WCAG AA compliant accent color variants and update default accent to meet 4.5:1 contrast ratio requirements. - Add --t-accent-text (darker for text on light backgrounds) - Add --t-accent-button (darker for button backgrounds with white text) - Change default accent from #3b82f6 to #2563eb (better contrast) - Update presets and tests for new default These changes ensure accent colors meet accessibility standards while maintaining visual consistency with the brand palette. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
2c3d8f5647
commit
364ac8fa0e
@ -23,6 +23,12 @@
|
|||||||
--t-accent-subtle: hsl(var(--t-accent-h) 40% 95%);
|
--t-accent-subtle: hsl(var(--t-accent-h) 40% 95%);
|
||||||
--t-accent-ring: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l) / 0.4);
|
--t-accent-ring: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l) / 0.4);
|
||||||
|
|
||||||
|
/* WCAG AA compliant accent variants for better contrast */
|
||||||
|
/* Darker accent for text on light backgrounds (4.5:1 with white) */
|
||||||
|
--t-accent-text: hsl(var(--t-accent-h) var(--t-accent-s) 38%);
|
||||||
|
/* Darker accent for button backgrounds to ensure 4.5:1 with white text */
|
||||||
|
--t-accent-button: hsl(var(--t-accent-h) var(--t-accent-s) 42%);
|
||||||
|
|
||||||
/* Secondary colors */
|
/* Secondary colors */
|
||||||
--t-secondary-accent: #ea580c;
|
--t-secondary-accent: #ea580c;
|
||||||
--t-sale-color: #dc2626;
|
--t-sale-color: #dc2626;
|
||||||
|
|||||||
@ -23,7 +23,7 @@ defmodule SimpleshopTheme.Theme.Presets do
|
|||||||
density: "balanced",
|
density: "balanced",
|
||||||
grid_columns: "4",
|
grid_columns: "4",
|
||||||
header_layout: "standard",
|
header_layout: "standard",
|
||||||
accent_color: "#3b82f6",
|
accent_color: "#2563eb",
|
||||||
layout_width: "wide",
|
layout_width: "wide",
|
||||||
card_shadow: "sm",
|
card_shadow: "sm",
|
||||||
announcement_bar: true
|
announcement_bar: true
|
||||||
|
|||||||
@ -124,7 +124,7 @@ defmodule SimpleshopTheme.SettingsTest do
|
|||||||
{:ok, settings} = Settings.apply_preset(:studio)
|
{:ok, settings} = Settings.apply_preset(:studio)
|
||||||
assert settings.mood == "neutral"
|
assert settings.mood == "neutral"
|
||||||
assert settings.typography == "clean"
|
assert settings.typography == "clean"
|
||||||
assert settings.accent_color == "#3b82f6"
|
assert settings.accent_color == "#2563eb"
|
||||||
end
|
end
|
||||||
|
|
||||||
test "returns error for invalid preset" do
|
test "returns error for invalid preset" do
|
||||||
|
|||||||
@ -42,7 +42,7 @@ defmodule SimpleshopTheme.Theme.PresetsTest do
|
|||||||
assert preset.density == "balanced"
|
assert preset.density == "balanced"
|
||||||
assert preset.grid_columns == "4"
|
assert preset.grid_columns == "4"
|
||||||
assert preset.header_layout == "standard"
|
assert preset.header_layout == "standard"
|
||||||
assert preset.accent_color == "#3b82f6"
|
assert preset.accent_color == "#2563eb"
|
||||||
end
|
end
|
||||||
|
|
||||||
test "returns boutique preset" do
|
test "returns boutique preset" do
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user