[WB-1814.8] Refactor Popover, Tooltip, Toolbar to use semantic colors

[jandrade]

Summary:

Next step is to refactor the Popover, Tooltip and Toolbar packages to use
semantic colors.

Implementation plan:

1. [WB-1814.1] Refactor Checkbox and Radio to use semantic colors #2439
2. [WB-1814.2] Refactor TextField and TextArea to use semantic colors #2440
3. [WB-1814.3] Refactor Switch to use semantic colors #2441
4. [WB-1814.4] Refactor Accordion, Banner, BirthdayPicker to use semantic colors #2446
5. [WB-1814.5] Refactor IconButton to use semantic colors #2449
6. [WB-1814.6] Refactor Link to use semantic colors #2464
7. [WB-1814.7] Refactor Modal to use semantic colors #2468
8. Popover, Tooltip, Toolbar (current PR)
9. Dropdown
10. Clickable, Pill

Issue: WB-1814

Test plan:

Verify that the Modal Chromatic snapshots are mostly unchanged.

[changeset-bot]

🦋 Changeset detected

Latest commit: c0cb49c

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

This PR includes changesets to release 3 packages

Name	Type
@khanacademy/wonder-blocks-popover	Patch
@khanacademy/wonder-blocks-toolbar	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: +69 B (+0.07%)

Total Size: 97.5 kB

Filename	Size	Change
packages/wonder-blocks-popover/dist/es/index.js	4.89 kB	+28 B (+0.58%)
packages/wonder-blocks-toolbar/dist/es/index.js	923 B	+18 B (+1.99%)
packages/wonder-blocks-tooltip/dist/es/index.js	7.01 kB	+23 B (+0.33%)

ℹ️ View Unchanged

Filename	Size
packages/wonder-blocks-accordion/dist/es/index.js	3.53 kB
packages/wonder-blocks-banner/dist/es/index.js	1.55 kB
packages/wonder-blocks-birthday-picker/dist/es/index.js	1.82 kB
packages/wonder-blocks-breadcrumbs/dist/es/index.js	886 B
packages/wonder-blocks-button/dist/es/index.js	4.3 kB
packages/wonder-blocks-cell/dist/es/index.js	2.01 kB
packages/wonder-blocks-clickable/dist/es/index.js	3.04 kB
packages/wonder-blocks-core/dist/es/index.js	2.97 kB
packages/wonder-blocks-data/dist/es/index.js	6.25 kB
packages/wonder-blocks-dropdown/dist/es/index.js	19 kB
packages/wonder-blocks-form/dist/es/index.js	6.03 kB
packages/wonder-blocks-grid/dist/es/index.js	1.36 kB
packages/wonder-blocks-icon-button/dist/es/index.js	3.11 kB
packages/wonder-blocks-icon/dist/es/index.js	873 B
packages/wonder-blocks-labeled-field/dist/es/index.js	1.22 kB
packages/wonder-blocks-layout/dist/es/index.js	1.82 kB
packages/wonder-blocks-link/dist/es/index.js	2.27 kB
packages/wonder-blocks-modal/dist/es/index.js	5.41 kB
packages/wonder-blocks-pill/dist/es/index.js	1.4 kB
packages/wonder-blocks-progress-spinner/dist/es/index.js	1.52 kB
packages/wonder-blocks-search-field/dist/es/index.js	1.33 kB
packages/wonder-blocks-switch/dist/es/index.js	2 kB
packages/wonder-blocks-testing-core/dist/es/index.js	3.73 kB
packages/wonder-blocks-testing/dist/es/index.js	1.07 kB
packages/wonder-blocks-theming/dist/es/index.js	679 B
packages/wonder-blocks-timing/dist/es/index.js	1.79 kB
packages/wonder-blocks-tokens/dist/es/index.js	2.51 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-imkbxeudso.chromatic.com/

Chromatic results:

Metric	Total
Captured snapshots	16
Tests with visual changes	4
Total stories	543
Inherited (not captured) snapshots [TurboSnap]	364
Tests on the build	380

[khan-actions-bot]

Gerald

Required Reviewers

• @Khan/wonder-blocks for changes to .changeset/curly-countries-protect.md, .changeset/eighty-grapes-mate.md, .changeset/mean-badgers-sit.md, __docs__/wonder-blocks-popover/popover-content-core.stories.tsx, __docs__/wonder-blocks-popover/popover.stories.tsx, __docs__/wonder-blocks-tooltip/tooltip.stories.tsx, packages/wonder-blocks-popover/src/components/popover-content-core.tsx, packages/wonder-blocks-toolbar/src/components/toolbar.tsx, packages/wonder-blocks-tooltip/src/components/tooltip-bubble.tsx, packages/wonder-blocks-tooltip/src/components/tooltip-tail.tsx

---

Don't want to be involved in this pull request? Comment #removeme and we won't notify you of further changes.

[github-actions]

npm Snapshot: Published

🎉 Good news!! We've packaged up the latest commit from this PR (fe8f471) and published all packages with changesets to npm.

You can install the packages in webapp by running:

./services/static/dev/tools/deploy_wonder_blocks.js --tag="PR2470"

Packages can also be installed manually by running:

pnpm add @khanacademy/wonder-blocks-<package-name>@PR2470

[beaesguerra]

Code changes look good! Left a comment in Chromatic on the diff to see what your thoughts were!