feat(docs): Add custom content for sketchy preset demo

[atanasster]

issue #1128

• fix: the context was not picked up, so even color palette was not correctly displayed
• fix: the font needed to be dynamically loaded in the header.
• feat: added components.mdx instead of lorem.mdx. The file https://github.com/beerose/theme-ui-sketchy/blob/master/src/components/components.mdx is copied from @beerose repository and we should give credits in the appropriate place.

sites:
before: https://theme-ui.com/presets/sketchy
now: https://theme-ui-draft.netlify.app/presets/sketchy

[hasparus]

Hey atanasster! Thanks for the PR!

I think borders and buttons don't really make sense for most of the presets, because they don't have variants.

I wouldn't say that beerose's components.mdx was meant to be rendered with different presets.

[hasparus]

Instead of one size fits all solutions like we have right now, I think we should allow presets to affect how their docs are displayed. We already have one size fits all right now.

I had mentioned a few ideas in the issue you linked.

Expected behavior

• (minimum) Theme UI docs should dynamically fetch fonts for presets.
• (would be nice) Theme UI docs could link to external preset's own docs with a Message at the top of the page?
• (would be awesome) Presets could declare an MDX or JS file to be rendered in the docs?

[atanasster]

@hasparus thanks for the feedback, a few changes:

• the JSON text area is now outside of the theme provider.
• all the 'variants' components are now dynamically displayed depending on the theme:
  1. borders
  2. buttons
  3. badges
  4. alerts

example with borders variants: https://theme-ui-draft.netlify.app/presets/sketchy
example no borders variants: https://theme-ui-draft.netlify.app/presets/swiss

[vercel]

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

🔍 Inspect: https://vercel.com/systemui/theme-ui/AYuaxEn3bmGDR58un5znWb5Z4ee1
✅ Preview: https://theme-ui-git-fork-atanasster-preset-sketchy-sty-e43ba7-systemui.vercel.app

[lachlanjc]

This is a great improvement! A few little things to go. Also, not sure if this is an issue with the preset or the docs, but two buttons aren't using the right font on iOS:

[lachlanjc]

This is looking great! Are these borders supposed to look different though?

[lachlanjc]

@hasparus Any issue with merging this as-is? I think it’s providing a better experience for the sketchy docs than we currently are:

Before: https://theme-ui.com/demo
After: https://theme-ui-ldlav21vx.vercel.app/demo

[lachlanjc]

@hasparus ping on opinions here?

[hasparus]

🚀 PR was released in v0.14.0 🚀