diff --git a/docs/chakra-migration-guide.md b/docs/chakra-migration-guide.md new file mode 100644 index 00000000000..dae5cc0a2e9 --- /dev/null +++ b/docs/chakra-migration-guide.md @@ -0,0 +1,60 @@ +# Chakra migration guide + +This is a reference for migrating our current `styled` components from `emotion` to [Chakra](https://chakra-ui.com/) components. + +This is part of our [UI library implementation epic](https://github.com/ethereum/ethereum-org-website/issues/6374). + +## Replace styled components with Chakra components + +All `styled` components need to be removed and replaced with the corresponded Chakra component. [See the list of components](https://chakra-ui.com/docs/components). + +## Override styles using style props + +- You can see how to use the different style props here: [https://chakra-ui.com/docs/styled-system/style-props](https://chakra-ui.com/docs/styled-system/style-props#margin-and-padding) +- Chakra default values are documented here: [https://chakra-ui.com/docs/styled-system/theme](https://chakra-ui.com/docs/styled-system/theme) + +```tsx +// before +const Paragraph = styled.p` + font-size: 1rem; + margin: 1rem; +` + +// now + +``` + +## Theme colors + +All the previous colors defined in the old theme `src/theme.ts` were ported into the new theme as well. Use the same color variables. + +```tsx +// before +const Text = styled.p` + color: ${({ theme }) => theme.colors.primary}; + background-color: ${({ theme }) => theme.colors.background}; +` + +// now + +``` + + + +## Update dependencies + +- [Deprecated] `src/components/Icon` - use the [Chakra Icon](https://chakra-ui.com/docs/components/icon/usage) instead. + +```tsx +import { Icon } from "@chakra-ui/react" +import { BsQuestionSquareFill } from "react-icons/bs" +; +``` + +- [Deprecated]`src/components/SharedStyledComponents` - we are not using this anymore, use Chakra components instead. + +## Do you have any other question? + +Ping us in Discord, in the `#ui-library-migration` channel, or leave a comment here or in your opened PR, and we can help you out 💪