Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Chakra UI setup #7195

Merged
merged 12 commits into from
Aug 8, 2022
Merged

Chakra UI setup #7195

merged 12 commits into from
Aug 8, 2022

Conversation

pettinarip
Copy link
Member

@pettinarip pettinarip commented Jul 26, 2022

Note: branched off from #7179 (depends on emotion)

Description

Initial Chakra UI setup.

Things addressed in this PR:

  • Installed Chakra (with Gatsby plugins)
  • Overridden default Chakra theme with an initial custom theme
  • Reorganized legacy global styles in a new GlobalStyle component
  • Synced old dark mode state with Chakra color mode state

Related Issue

Epic #6374
Fixes #7196

@github-actions github-actions bot added content 🖋️ This involves copy additions or edits dependencies 📦 Changes related to project dependencies review needed 👀 labels Jul 26, 2022
@gatsby-cloud
Copy link

gatsby-cloud bot commented Jul 26, 2022

Gatsby Cloud Build Report

ethereum-org-website-dev

🎉 Your build was successful! See the Deploy preview here.

Build Details

View the build logs here.

🕐 Build time: 33m

@pettinarip pettinarip changed the base branch from dev to emotion August 1, 2022 20:07
@pettinarip pettinarip marked this pull request as ready for review August 2, 2022 14:19
@@ -0,0 +1,12 @@
const styles = {
global: (_props) => ({
// TODO: remove these overrides as we adopt the new Design System
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A bit more documentation/context on why this is needed to begin with would be helpful.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

e.g. why is both this file & GlobalStyle.tsx needed?

const config: ThemeConfig = {
cssVarPrefix: "eth",
initialColorMode: "light",
useSystemColorMode: false,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should use the system color mode personally, I enjoy this feature when I use websites.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed. I've changed it 👍🏼

Copy link
Member

@corwintines corwintines left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM. Tried to break a bunch of pages with no success yet.

@pettinarip pettinarip merged commit 7c392cf into emotion Aug 8, 2022
@pettinarip pettinarip deleted the chakra-setup branch August 8, 2022 14:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
content 🖋️ This involves copy additions or edits dependencies 📦 Changes related to project dependencies
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Install Chakra UI
3 participants