From 7a58021c6a14745f06bd85e0981151f65084e70d Mon Sep 17 00:00:00 2001 From: Edward Zarecor Date: Sat, 2 May 2026 14:38:45 -0400 Subject: [PATCH] fix(tokens): update code-color token to meet WCAG AA contrast MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The light theme code-color token (#E83E8C) failed WCAG 1.4.3 contrast requirements, achieving 3.81:1 on white and 3.56:1 on off-white backgrounds — both below the 4.5:1 minimum for normal-weight text. Updated color.code.base to reference {color.brand.500} rather than a raw hex value. This resolves the contrast failure (#9D0054, ~9:1 on white) and aligns with the established pattern of component tokens referencing palette tokens (e.g. success → green, info → teal). It also ensures that theme overrides to brand-500 automatically propagate to inline code text color. Compiled output: --pgn-color-code-base: var(--pgn-color-brand-500) Identified via WCAG 2.2 AA audit using static source analysis and automated page scanning (OpenEdX_ActionRowComp.pdf, 01 May 26). AI assistance: Code change, contrast analysis, and token architecture review developed with Claude (claude-sonnet-4-6). Conversation informed the audit findings, color selection, and token pipeline tracing. Co-authored-by: Claude --- styles/css/themes/light/variables.css | 2 +- tokens/src/themes/light/components/Code.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/styles/css/themes/light/variables.css b/styles/css/themes/light/variables.css index 1c150c9c8c..c1ca04083d 100644 --- a/styles/css/themes/light/variables.css +++ b/styles/css/themes/light/variables.css @@ -614,7 +614,6 @@ --pgn-color-btn-disabled-border-inverse-outline-success: inherit; --pgn-color-btn-disabled-border-inverse-warning: #00000000; --pgn-color-card-base: inherit; - --pgn-color-code-base: #E83E8CFF; --pgn-color-form-control-label-base: inherit; --pgn-color-icon-button-bg-base: #00000000; --pgn-color-menu-item-bg: #00000000; @@ -1231,6 +1230,7 @@ --pgn-color-chip-border-focus-selected-light: var(--pgn-color-dark-500); --pgn-color-chip-label-base: var(--pgn-color-primary-700); --pgn-color-chip-label-dark: var(--pgn-color-chip-outline-dark); + --pgn-color-code-base: var(--pgn-color-brand-500); --pgn-color-data-table-bg-base: var(--pgn-color-bg-base); --pgn-color-data-table-border: var(--pgn-color-light-300); --pgn-color-dropdown-text: var(--pgn-color-body-base); diff --git a/tokens/src/themes/light/components/Code.json b/tokens/src/themes/light/components/Code.json index 07785b9754..a698fdf767 100644 --- a/tokens/src/themes/light/components/Code.json +++ b/tokens/src/themes/light/components/Code.json @@ -2,7 +2,7 @@ "color": { "$type": "color", "code": { - "base": { "source": "$code-color", "$value": "#E83E8C" }, + "base": { "source": "$code-color", "$value": "{color.brand.500}" }, "kbd": { "base": { "source": "$kbd-color", "$value": "{color.white}" }, "bg": { "source": "$kbd-bg", "$value": "{color.gray.700}" }