feat: Bring Chakra-ui theme API v1 to Vue 2

[simpletrontdip]

Support Chakra UI Theme API v1 in Vue 2

• Use global CSS variables
• Pseudo selectors
• Base styles in themes
• Better RTL support, because of logical style attributes

Description

• Utilize @chakra-ui/styled-system to bring new Theme API to Vue 2
• Remove config dir, now they are supported by the upstream theme package.
• Add a new serializer @emotion/jest/serializer to enhance snapshot tests
• Remove some assertions in tests in favor of the new serializer
• Refine the importing logic, use @chakra-ui/vue-theme instead of the relative path lib/theme/src
• Small nit for removing debug code, storybook

Motivation and Context

• Theme API v1 provides a better way to styling component
• This makes the theme consistent across frameworks
• We do have another repo for this update, but it is for Vue3 only
• It is nicer to have the new features for the existing lib, Vue, not everyone can update and wait for Vue3

How Has This Been Tested?

• All existing tests passed
• New tests added
• Existing Storybook works just fine
• Most of the changes is:
  • Snapshot change, previously they are just random class names, now they include all CSS details
  • Code utils removing, these utils are now provided by upstream packages

Screenshots:

Update
Sandbox demo for baseStyle here

Vue.use(Chakra, {
  extendTheme: {
    baseStyle: {
      CButton: {
        borderWidth: "4px",
        borderColor: "blue.600",
        borderRadius: "lg"
      },
      CHeading: {
        fontWeight: 600,
        textDecor: "line-through"
      }
    }
  }
});

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
  Not really sure about this, should we link to upstream theme API page
• I have added tests to cover my changes.
• All new and existing tests passed.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 2f5258e

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

@simpletrontdip is attempting to deploy a commit to the Chakra UI Team on Vercel.

A member of the Team first needs to authorize it.

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 2f5258e:

Sandbox	Source
Chakra UI Vue (0.X) Starter Template	Configuration
chakra-ui-nuxt-demo	Configuration
Chakra UI Vue (0.X) Starter Template (forked)	PR

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

chakra-ui-vue – ./

🔍 Inspect: https://vercel.com/chakra-ui/chakra-ui-vue/J2KahxY98VcoPSkdm2MaZ1bu1pdT
✅ Preview: https://chakra-ui-vue-git-fork-simpletrontdip-develop-chakra-ui.vercel.app

[codebender828]

Very interesting PR @simpletrontdip 😀 Thanks for taking the initiative on this. since it's relatively big, I will take some time to review it thoroughly. But appreciate the hard work! Will keep you posted here.

[codebender828]

Thank you for the work done here, @simpletrontdip 👍🏽

Really impressed. Will be sure to give you a shoutout. I'm curious to see how you and your team are using this library in production. 😀

Will schedule a new minor version release with this change after merging it. If you'd like to continue contributing to Chakra UI Vue, I'd be happy to chat with you since we need more people to help us as we grow!

Cheers, and thanks for the good work.

[simpletrontdip]

Thanks, @codebender828.
After some evaluations, my team has decided to use Vue3 because we are starting a new project and utilize the composition API.
Not sure I have a consistent time slot for this, but I'm ready to help, just find me in the discord server, with the same id.
For Vue 3 version, we've created a JS version to speed up the development and prioritize our requirements, hope that we can contribute back someday.