feat(coachmark)!: migrate tokens

[jenndiaz]

Description

Migrates tokens and implements new styling for coach mark

• Splits the coach mark indicator and coach mark popover into 2 separate components, CoachIndicator and CoachMark
• is "responsive" and displays different button and menu styling for Large scale (mobile)
• Updates stories for both components

Jira Ticket - CSS 193

XD File

How and where has this been tested?

• How this was tested:
• Browser(s) and OS(s) this was tested with:
  Browser(s) and OS(s) this was tested with:
  Chrome Version 113.0.5672.63 on macOS
  Safari 16.4 on macOS
  Firefox 112.0.2 on macOS

Regression testing

Test Outline @jawinn

1. Open the docs site for the CoachMark component.

• component should display mobile styling when scale is Large
• styling should match XD files

2. Open the storybook site for the CoachMark component

• controls should all function as expected
• styling should match docs site

3. Open the docs site for the CoachIndicator component.

• Styling should match the live docs site

4. Open the storybook site for the CoachIndicator component

• controls should all function as expected @jawinn : except as noted in comment about reduceMotion
• styling should match docs site

Validate: @jawinn

1. A legacy documentation page (such as accordion), including:

• The page renders correctly
• The page is accessible
• The page is responsive

2. A migrated documentation page (such as action group), including:

• The page renders correctly
• The page is accessible
• The page is responsive

Screenshots

Desktop (medium)

Mobile (Large)

To-do list

• If my change impacts other components, I have tested to make sure they don't break.
• If my change impacts documentation, I have updated the documentation accordingly.
• I have read the CONTRIBUTING document.
• I have tested these changes in Windows High Contrast mode.
• I have updated any relevant storybook stories and templates.
• If my change(s) include visual change(s), a designer has reviewed and approved those changes.

• This pull request is ready to merge.

[github-actions]

🚀 Deployed on https://pr-1992--spectrum-css.netlify.app

[github-actions]

File metrics

Overall Δ: +36.35 KB ⬆ (+0.99%)

buttongroup

-< 1KB ⬇

File	Size	Diff	Δ	Δ%
Total changes	7.00 KB	6.99 KB	-< 1KB ⬇	-0.17%
index-base.css	1.90 KB	1.90 KB	-< 1KB ⬇	-0.21%
index-theme.css	< 1KB	< 1KB	No change 🎉	0%
index-vars.css	1.90 KB	1.90 KB	-< 1KB ⬇	-0.21%
index.css	1.90 KB	1.90 KB	-< 1KB ⬇	-0.21%
mods.json	< 1KB	< 1KB	No change 🎉	0%
themes/express.css	< 1KB	< 1KB	No change 🎉	0%
themes/spectrum.css	< 1KB	< 1KB	No change 🎉	0%

coachmark

-4.54 KB ⬇

File	Size	Diff	Δ	Δ%
Total changes	12.25 KB	7.71 KB	-4.54 KB ⬇	-37.04%
index-vars.css	9.10 KB	7.71 KB	-1.38 KB ⬇	-15.22%
vars.css	3.15 KB	new

[pfulton]

Closed in favor of #2323