diff --git a/frontend/src/theme.css b/frontend/src/theme.css index 553e88f..1f0fa1f 100644 --- a/frontend/src/theme.css +++ b/frontend/src/theme.css @@ -3,16 +3,16 @@ --color-surface: #f4f4f6; --color-text: #1a1a1e; --color-text-muted: #5b5b63; - --color-border: #d8d8dd; + --color-border: #8c8c91; --color-accent: #4a6fa5; --modality-bh_email: #4a6fa5; --modality-personal_email: #6f9c8f; - --modality-bh_text: #a5764a; + --modality-bh_text: #8c643f; --modality-personal_text: #a58a4a; --modality-voice: #8a6fa5; - --modality-fb_messenger: #4a6fa5; - --modality-nd_messenger: #6f8fa5; + --modality-fb_messenger: #3b5998; + --modality-nd_messenger: #597186; --spacing-sm: 0.5rem; --spacing-md: 1rem; @@ -26,7 +26,7 @@ --color-surface: #202024; --color-text: #e8e8ea; --color-text-muted: #a0a0a8; - --color-border: #33333a; + --color-border: #64646e; } } diff --git a/frontend/tests/theme.spec.js b/frontend/tests/theme.spec.js new file mode 100644 index 0000000..0964c10 --- /dev/null +++ b/frontend/tests/theme.spec.js @@ -0,0 +1,33 @@ +import { describe, it, expect } from 'vitest' +import { readFileSync } from 'fs' +import { fileURLToPath } from 'url' +import { dirname, join } from 'path' + +const __dirname = dirname(fileURLToPath(import.meta.url)) +const themeCss = readFileSync(join(__dirname, '../src/theme.css'), 'utf-8') + +describe('theme.css contrast fixes', () => { + it('strengthens --color-border to a WCAG-compliant value in light mode', () => { + expect(themeCss).toContain('--color-border: #8c8c91;') + }) + + it('strengthens --color-border to a WCAG-compliant value in dark mode', () => { + expect(themeCss).toContain('--color-border: #64646e;') + }) + + it('darkens --modality-bh_text for 4.5:1 contrast with white text', () => { + expect(themeCss).toContain('--modality-bh_text: #8c643f;') + }) + + it('darkens --modality-nd_messenger for 4.5:1 contrast with white text', () => { + expect(themeCss).toContain('--modality-nd_messenger: #597186;') + }) + + it('differentiates --modality-fb_messenger from --modality-bh_email', () => { + const bhEmailMatch = themeCss.match(/--modality-bh_email: (#[0-9a-f]{6});/) + const fbMessengerMatch = themeCss.match(/--modality-fb_messenger: (#[0-9a-f]{6});/) + expect(bhEmailMatch).not.toBeNull() + expect(fbMessengerMatch).not.toBeNull() + expect(bhEmailMatch[1]).not.toBe(fbMessengerMatch[1]) + }) +})