Feat: Adds tokens to EmptyState

[eduardoformiga]

What's the purpose of this pull request?

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

How does it work?

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

New local tokens for EmptyState

Local token	Default value/Global token linked
--fs-empty-state-height	100%
--fs-empty-state-min-height	50vh
--fs-empty-state-padding	0 var(--fs-spacing-8)
--fs-empty-state-bkg-color	var(--fs-color-neutral-bkg)

Rounded Variant

Local token	Default value/Global token linked
--fs-empty-state-border-radius	var(--fs-border-radius)

Related Components

EmptyCart	EmptyGallery

Nested Elements

Title

Local token	Default value/Global token linked
--fs-empty-state-title-margin-bottom	var(--fs-spacing-2)
--fs-empty-state-title-color	var(--fs-color-disabled-text)
--fs-empty-state-title-size	var(--fs-text-size-3)

Link

Local token	Default value/Global token linked
--fs-empty-state-link-min-width	11.875rem

How to test it?

• The EmptyState 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 (#4)

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
nextjs-store-storybook	✅ Ready (Inspect)	Visit Preview	Jun 15, 2022 at 3:07PM (UTC)

[vtex-sites]

Preview is ready

This pull request generated a Preview

👀   Preview: https://sfj-7405d17--nextjs.preview.vtex.app
🔬   Go deeper by inspecting the Build Logs
📝   based on commit 7405d17

[vtex-sites]

Lighthouse Reports

Here are the Lighthouse reports of this Pull Request

📝 Based on commit 7405d17

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

[filipewl]

Looks nice!

[hellofanny]

Well done forms!!! 🤩 LGTM!

[renatamottam]

I have some suggestions for the doc organization, we can talk later :)

[eduardoformiga]

I have some suggestions for the doc organization, we can talk later :)

I implemented it here. Thanks!