Feat: Adds tokens to Accordion

[hellofanny]

Ported from https://github.com/vtex-sites/nextjs.store/pull/130

What's the purpose of this pull request?

This PR applies the new Theming structure to Accordion: new scoped tokens linked to global ones.

How does it work?

This PR uses local variables to parameterize the Accordion properties, then connects these scoped tokens to the global ones.

New local tokens for Accordion

Local token	Default value/Global token linked
--fs-accordion-item-border-bottom-width	1px
--fs-accordion-item-border-bottom-color	var(--fs-border-color-light)
--fs-accordion-item-button-padding	var(--fs-spacing-3) 0
--fs-accordion-item-button-color	var(--fs-color-text)
--fs-accordion-item-button-bkg-color	transparent
--fs-accordion-item-button-notebook-padding-right	var(--fs-spacing-4)
--fs-accordion-item-button-notebook-padding-left	var(--fs-accordion-item-button-notebook-padding-right)
--fs-accordion-item-panel-notebook-padding-right	var(--fs-spacing-4)
--fs-accordion-item-panel-notebook-padding-left	var(--fs-accordion-item-panel-notebook-padding-right)

How to test it?

• The Accordion component and its related components should look just as it was before these changes.
• You can check the story on Storybook.

Checklist

You may erase this after checking them all ;)

Changelog

• Added an entry in the CHANGELOG.md at the beginning of its due section. The latest version should comes first.
• Added the PR number with the PR link at the entry in the CHANGELOG.md. E.g., New items in the pull_request_template.md (#12)

PR Description

• Added a label according to the PR goal - Breaking change, Enhancement, Bug or Chore.
• Added the component, hook, or pathname in-between backticks (``) - If applicable. E.g., ComponentName component.
• Identified the function or parameter in the PR - If applicable. E.g., useWindowDimensions hook.

Documentation

• PR description
• Added to/Updated the Storybook - if applicable.
• For documentation changes, ping @ carolinamenezes, @ PedroAntunesCosta or @ Mariana-Caetano to review and update.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
gatsby-store-storybook	✅ Ready (Inspect)	Visit Preview	Jun 28, 2022 at 0:36AM (UTC)

[vtex-sites]

Preview is ready

This pull request generated a Preview

👀   Preview: https://sfj-3c56c2d--gatsby.preview.vtex.app
🔬   Go deeper by inspecting the Build Logs
📝   based on commit 3c56c2d

[vtex-sites]

Lighthouse Reports

Here are the Lighthouse reports of this Pull Request

📝 Based on commit 3c56c2d

Lighthouse Report by page
📎   /
📎   /apple-magic-mouse/p
📎   /office

[renatamottam]

Approving cuz it looks the same as https://github.com/vtex-sites/nextjs.store/pull/130

[lucasfp13]

Nice! 💯