feat: Change brand-sample from Purple to 'Autumn'

[kdmccormick]

This makes the theme changes more severe so that it's easier to tell whether or not the theme is working.

Claude generated the theme based on my request to look at the design tokens docs and then make "something like Boston in the fall" Let me know if the provided style dict is following best practices or not. If not, then I'm happy to re-generate it--I'd like that whatever we check in here is a good example how people actually might want to do things.

I wanted to include typography changes, too, and I did successfully make a version of this which customized all the font-family CSS attributes. But, I ran out of time before realizing that I'd need to get all those fonts loaded into the page in order to actually work, and I didn't know how to do that.

Screenshot (BEFORE REVIEW FEEDBACK):

Screenshot (AFTER REVIEW FEEDBACK):

See also: the included authn screenshot.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 93.04%. Comparing base (ccac8d4) to head (cfb219e).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files

@@ Coverage Diff @@## main #47 +/- ##
=======================================
Coverage 93.04% 93.04% =======================================
Files 16 16 Lines 503 503 Branches 18 18 =======================================
Hits 468 468 Misses 24 24 Partials 11 11 

Flag	Coverage Δ
unittests	93.04% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[brian-smith-tcril]

This is a Claude-generated comment. Brian's prompt: "reviewing #47, worried about contrast for a11y"

I ran the new autumn palette through WCAG 2.x contrast math against #FFFFFF and cross-checked against the upstream Paragon release-23.x token defaults to see which pairings actually matter in practice.

The headline result: only one token is a real concern — brand-base.

Token	This PR	vs #FFFFFF	Upstream Paragon	vs #FFFFFF
brand-base	#C5572A	4.40 : 1 ✗ AA normal	#9D0054	8.14 : 1 ✓ AAA
primary-base	#6B1A28	11.6 : 1 ✓ AAA	#0A3055	12.6 : 1 ✓ AAA
success-base	#3C5A3E	7.66 : 1 ✓ AAA	—	—
info-base	#4F7373	5.22 : 1 ✓ AA	—	—
danger-base	#8B2332	8.74 : 1 ✓ AAA	—	—

I initially flagged warning-base (#D4A537, 2.28 : 1) and the two accent tokens (#E8A33D / #5A8042) for failing against white text — but that's a non-issue. Upstream Paragon ships warning as #FFD900 (1.37 : 1 vs white), accent.a as #00BBF9 (2.22 : 1), and accent.b as #FFEE88 (~1.20 : 1). Those tokens by convention aren't paired with white text — .btn-warning uses dark text, and accents are decorative tints — so the autumn versions follow the same pattern and don't regress anything.

The real issue: brand-base at 4.40 : 1

Paragon's .btn-brand puts white labels on brand-500, so this is the most-exposed text-on-background pairing in the whole token system. Upstream's magenta clears AAA at 8.14 : 1; the new burnt-orange misses AA normal text (4.5 needed) by 0.1, and axe/Lighthouse will catch it the moment anyone themes an MFE with this. Darkening slightly — e.g. #B4501F (~4.9 : 1) or #A84A1C (~5.5 : 1) — keeps the burnt-pumpkin character and clears AA.

Token-structure notes

The structure looks fine — uses the token-reference + modify pattern Style Dictionary expects, and dist/light.css resolves cleanly. The one nit: the original had "$type": "color" at the file root; this PR moves it inside color. Both work, but worth a glance at the generated output to confirm parity.

Suggestion

Since this file is a teaching example, either works:

• Option A (recommended): nudge brand-base ~10% darker so the example ships AA-clean by default — consumers will copy this verbatim.
• Option B: keep the palette as-is and add a README note that real brand packages should run colors through a contrast checker, calling out brand-base specifically. Arguably more instructive.

Either way, this is a solid demo of token customization — the issue is just the specific orange.

[feanil]

I think it's worth doing both of those things, we should be compliant in our example but also provide pointers to how others can keep their themes accessible. I think we should update the contrast in this PR but we can make a follow-up PR for the README update if that's easier.

[kdmccormick]

Thanks for running it through the a11y checker @brian-smith-tcril , I hadn't thought to do that.

I darkened brand-base to B4501F as suggested, updated the screenshots, and recompiled the dist directory.

@feanil@brian-smith-tcril Can I get a 👍🏻 to merge this?