From 0c0313fa0c5b7926123b557d9cd6f0bbbd1a14cf Mon Sep 17 00:00:00 2001 From: Thomas Jeffery Date: Mon, 27 Apr 2026 10:22:58 -0600 Subject: [PATCH] fix(#3882): use neutral border token on filled-accent interactive content Follow-up to #3848. That PR wired the .goa-container--interactive.accent--filled .content rule to use --goa-container-interactive-border, which resolves to the brand teal token. Every interactive container with accent="filled" (the default) was rendering a brand-teal border at rest, where the intent is greyscale-200. Swap the rule to --goa-container-border, the existing neutral token already used by the base .content rule for non-filled accents. The interactive-border token is intentionally untouched in design-tokens because it remains the correct value for the accent="thick"/"thin" heading element, where teal-on-teal renders as a flush accent bar. --- libs/web-components/src/components/container/Container.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libs/web-components/src/components/container/Container.svelte b/libs/web-components/src/components/container/Container.svelte index 436f671d39..5cedf2ee02 100644 --- a/libs/web-components/src/components/container/Container.svelte +++ b/libs/web-components/src/components/container/Container.svelte @@ -220,7 +220,7 @@ color: var(--goa-container-interactive-heading-text-color); } .goa-container--interactive.accent--filled .content { - border: var(--goa-container-interactive-border); + border: var(--goa-container-border); background-color: var(--goa-container-interactive-bg-color); }