fix(meter): update layout tokens

[jenndiaz]

Description

1. Updates Meter to use new layout tokens:
   meter-minimum-width
meter-maximum-width
meter-default-width
meter-thickness-small
meter-thickness-large
   Large value from component-top-to-text-200 to component-top-to-text-75 

2. Add Meter Stories

3. Added controls to Progress Bar: value and label

Bit of context, for now Meter uses ProgressBar css.

How and where has this been tested?

Please tag yourself on the tests you've marked complete to confirm the tests have been run by someone other than the author.

Test Outline

1. Open the storybook for the Meter component:

• Ensure Meter displays appropriately
• Toggle between fill colors
• toggle between meter sizing [@mlogsdon18]

2. Open the storybook for the Progress Bar component:

• Ensure controls all work as they should [@mlogsdon18]

3. Open the Docs site for the Meter component.

• inspect for new tokens

Regression testing

Validate:

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

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

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

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

Screenshots

Before

After

To-do list

• I have read the contribution guidelines.

• I have updated relevant storybook stories and templates.

• I have tested these changes in Windows High Contrast mode.

• 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.

• ✨ This pull request is ready to merge. ✨

[github-actions]

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

[mlogsdon18]

Just a few comments/questions!

[mlogsdon18]

You can just remove this if you don't have anything to pass through