WB-1814: Switch to semantic color tokens

[jandrade]

Summary:

This PR switches the color tokens used in components to the new semantic color
tokens.

• Migrated Accordion, Banner, and BirtdayPicker.

Issue: https://khanacademy.atlassian.net/browse/WB-1814

Test plan:

Verify that the visual regression tests don't show any changes.

[changeset-bot]

🦋 Changeset detected

Latest commit: 55d99d8

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 15 packages

Name	Type
@khanacademy/wonder-blocks-birthday-picker	Patch
@khanacademy/wonder-blocks-accordion	Patch
@khanacademy/wonder-blocks-banner	Patch
@khanacademy/wonder-blocks-clickable	Patch
@khanacademy/wonder-blocks-button	Patch
@khanacademy/wonder-blocks-cell	Patch
@khanacademy/wonder-blocks-dropdown	Patch
@khanacademy/wonder-blocks-form	Patch
@khanacademy/wonder-blocks-icon-button	Patch
@khanacademy/wonder-blocks-link	Patch
@khanacademy/wonder-blocks-pill	Patch
@khanacademy/wonder-blocks-search-field	Patch
@khanacademy/wonder-blocks-modal	Patch
@khanacademy/wonder-blocks-popover	Patch
@khanacademy/wonder-blocks-tooltip	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

Size Change: +311 B (+0.32%)

Total Size: 96.8 kB

Filename	Size	Change
packages/wonder-blocks-accordion/dist/es/index.js	3.74 kB	-25 B (-0.66%)
packages/wonder-blocks-banner/dist/es/index.js	1.55 kB	+28 B (+1.83%)
packages/wonder-blocks-birthday-picker/dist/es/index.js	1.8 kB	+30 B (+1.69%)
packages/wonder-blocks-button/dist/es/index.js	4.18 kB	+66 B (+1.6%)
packages/wonder-blocks-cell/dist/es/index.js	2.07 kB	+63 B (+3.14%)
packages/wonder-blocks-clickable/dist/es/index.js	3.08 kB	+19 B (+0.62%)
packages/wonder-blocks-dropdown/dist/es/index.js	19.2 kB	+114 B (+0.6%)
packages/wonder-blocks-tokens/dist/es/index.js	2.37 kB	+16 B (+0.68%)

ℹ️ View Unchanged

Filename	Size
packages/wonder-blocks-breadcrumbs/dist/es/index.js	887 B
packages/wonder-blocks-core/dist/es/index.js	2.9 kB
packages/wonder-blocks-data/dist/es/index.js	6.24 kB
packages/wonder-blocks-form/dist/es/index.js	6.2 kB
packages/wonder-blocks-grid/dist/es/index.js	1.36 kB
packages/wonder-blocks-icon-button/dist/es/index.js	2.95 kB
packages/wonder-blocks-icon/dist/es/index.js	871 B
packages/wonder-blocks-labeled-field/dist/es/index.js	72 B
packages/wonder-blocks-layout/dist/es/index.js	1.82 kB
packages/wonder-blocks-link/dist/es/index.js	2.28 kB
packages/wonder-blocks-modal/dist/es/index.js	5.42 kB
packages/wonder-blocks-pill/dist/es/index.js	1.65 kB
packages/wonder-blocks-popover/dist/es/index.js	4.85 kB
packages/wonder-blocks-progress-spinner/dist/es/index.js	1.52 kB
packages/wonder-blocks-search-field/dist/es/index.js	1.36 kB
packages/wonder-blocks-switch/dist/es/index.js	1.92 kB
packages/wonder-blocks-testing-core/dist/es/index.js	3.74 kB
packages/wonder-blocks-testing/dist/es/index.js	1.07 kB
packages/wonder-blocks-theming/dist/es/index.js	693 B
packages/wonder-blocks-timing/dist/es/index.js	1.8 kB
packages/wonder-blocks-toolbar/dist/es/index.js	905 B
packages/wonder-blocks-tooltip/dist/es/index.js	6.99 kB
packages/wonder-blocks-typography/dist/es/index.js	1.23 kB

_{compressed-size-action}

[github-actions]

A new build was pushed to Chromatic! 🚀

https://5e1bf4b385e3fb0020b7073c-iieaffeqna.chromatic.com/

Chromatic results:

Metric	Total
Captured snapshots	372
Tests with visual changes	4
Total stories	511
Inherited (not captured) snapshots [TurboSnap]	0
Tests on the build	372

[jandrade]

Closing this big PR as I decided to split this work into smaller PRs.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 0.00%. Comparing base (2ecdfb5) to head (55d99d8).
Report is 31 commits behind head on main.

Additional details and impacted files

@@     Coverage Diff      @@
##   main   #2401   +/-   ##
============================
============================

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 2ecdfb5...55d99d8. Read the comment docs.