-
Notifications
You must be signed in to change notification settings - Fork 10.3k
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
chore(www): convert BoxWithBorder to theme-ui #25144
chore(www): convert BoxWithBorder to theme-ui #25144
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for all these improvements! I think the theme might not be correctly applied right now for one of the properties.
":after": withBorder && { | ||
content: `" "`, | ||
border: `1px solid ${t.colors.blackFade[10]}`, | ||
borderRadius: t => t.radii[1], |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Since borderRadius
is theme-aware I think you can just replace this with just:
borderRadius: t => t.radii[1], | |
borderRadius: 1, |
position: `relative`, | ||
":after": withBorder && { | ||
content: `" "`, | ||
border: `1px solid ${t.colors.blackFade[10]}`, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should this be:
border: `1px solid ${t.colors.blackFade[10]}`, | |
border: t => `1px solid ${t.colors.blackFade[10]}`, |
Alternately we could do:
border: `1px solid ${t.colors.blackFade[10]}`, | |
borderWidth: `1px`, | |
borderStyle: `solid`, | |
borderColor: `blackFade.10`, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I totally agree with you
Description
<BoxWithBorder/>
component to theme-uiScreenshot(s)
The logo container is wrapper in BoxWithBorder component
The items inside Guidance are all wrapped inside BoxWithBorder component
How to test
Local URL: http://localhost:8000/guidelines/logo/
Production URL: https://www.gatsbyjs.org/guidelines/logo/